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

HTML & CSS
1

Hi,

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>
<html>
<head>
	<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet">
	
	
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
	
	
	<script>
		
		$(document).ready(function(e){
			  // 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 */
				});
			
		});
	</script>

<style>
/***Advance Search ***/

.advanceSearch a{
color:#000;
font-size:12px;
font-weight:normal;
text-style:italic;
letter-spacing:1px;
}

.advanceSearch a:hover, .advanceSearch a:focus{
text-decoration:none;
outline:0;
}

#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 ***/

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

		
</body>
</html>

I have kept my counties.json file here:
D:\bootstrap\bootstrap_prac\ptandst5-1\counties.json

Thanks

2

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.

1 Like
3

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