How to get typeahead JS working with my json file
I would like to make a simple autocomplete with Typeahead JS but i cant make it work. I followed the instructions in the manual but I am not sure what I am doing wrong here. I cant get the right value out of the json file. Its an array with objects, and I just want the country names. Shouldnt be that hard I think. I doesnt display anything. Please help! You can find the typeahead js files at "Getting Started" on the Typeahead Github page.
This is my code:
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="typeahead.jquery.min.js"></script>
<script src="bloodhound.min.js"></script>
</head>
<body>
<div id="prefetch">
<input class="typeahead" type="text" placeholder="Countries">
</div>
<script>
var countries = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 4,
prefetch: {
url: 'countries.json',
}
});
countries.clearPrefetchCache();
countries.initialize();
$('#prefetch .typeahead').typeahead(null, {
name: 'countries',
displayKey: 'country',
source: countries.ttAdapter(),
});
</script>
</body>`
Json file (countries.json):
[
{
"country": "Holland",
"city": "Amsterdam"
},
{
"country": "Belgium",
"city": "Brussel"
},
{
"country": "Germany",
"city": "Berlin"
},
{
"country": "France",
"city": "Paris"
}
]
