Menu
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"
}
]
830
JSON is a text-based data format following JavaScript object syntax, which was popularized by Douglas Crockford. Even though it closely resembles JavaScript object literal syntax, it can be used independently from JavaScript, and many programming environments feature the ability to read (parse) and generate JSON.
The jQuery code uses getJSON() method to fetch the data from the file's location using an AJAX HTTP GET request. It takes two arguments. One is the location of the JSON file and the other is the function containing the JSON data. The each() function is used to iterate through all the objects in the array.
Your datumTokenizer is not configured correctly. It should look like this.
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('country'),
Here is a demo
I know the question is old but I hope this helps.
65
Another easy-way, it helped me, if your json is like this...
var data = [
{"stateCode": "CA", "stateName": "California"},
{"stateCode": "AZ", "stateName": "Arizona"},
{"stateCode": "NY", "stateName": "New York"},
{"stateCode": "NV", "stateName": "Nevada"},
{"stateCode": "OH", "stateName": "Ohio"}
];
$('#states').typeahead({
name: 'states',
limit: 10,
minLength: 1,
source: function (query, process) {
states = [];
map = {};
$.each(data, function (i, state) {
map[state.stateName] = state;
states.push(state.stateName);
});
process(states);
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
