Country list from json file is not displaying in input (auto Search)




I am trying to call my Country list from Json file but I not able get that list in my input.
below are my workings:

<!DOCTYPE html>
	<title>double Navigation</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

	<link href="" type="text/css" rel="stylesheet">
	<script type="text/javascript" src=""></script>
	<script type="text/javascript" src=""></script>
	<script type="text/javascript" src=""></script>
			  // Sonstructs the suggestion engine
				var countries = new Bloodhound({
					datumTokenizer: Bloodhound.tokenizers.whitespace,
					queryTokenizer: Bloodhound.tokenizers.whitespace,
					// The url points to a json file that contains an array of country names
					prefetch: './ptandst5-1/countries.json'
				// Initializing the typeahead with remote dataset
				$('.typeahead').typeahead(null, {
					name: 'countries',
					source: countries,
					limit: 10 /* Specify maximum number of suggestions to be displayed */

/***Advance Search ***/

.advanceSearch a{

.advanceSearch a:hover, .advanceSearch a:focus{

#advanceSearch select{
width:100% !important;

.typeahead, .tt-query, .tt-hint {
	border-radius: 8px;
	height: 30px;
	line-height: 30px;
	outline: medium none;
	padding: 8px 12px;
	width: auto;
.typeahead {
	background-color: #FFFFFF;
.typeahead:focus {
	border: 2px solid #0097CF;
.tt-query {
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
.tt-hint {
	color: #999999;
.tt-menu {
	background-color: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	margin-top: 12px;
	padding: 8px 0;
	width: 422px;
.tt-suggestion {
	font-size: 22px;  /* Set suggestion dropdown font size */
	padding: 3px 20px;
.tt-suggestion:hover {
	cursor: pointer;
	background-color: #0097CF;
	color: #FFFFFF;
.tt-suggestion p {
	margin: 0;

/***Advance Search End ***/

    <div class="container-fluid">
		<div class="row">
			<div class="col-sm-2">
               <input type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false">


I have kept my counties.json file here:



It doesn't work when run locally, as a security precaution to prevent bad people from taking sensitive files from your computer.

Put it on a server and it will work.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.