Geek Answers Handbook

How to get typeahead JS to work with my json file

I would like to make simple autocomplete with Typeahead JS , but I can't get it to work. I followed the instructions in the manual, but I'm not sure what I'm doing wrong here. I cannot get the correct value from json file. Its an array with objects, and I just want country names. I think this is not so difficult. I do not show anything. Please help! Typeahead js files can be found in the Getting Started section of 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"
    }

]
+4
source share
2 answers

Your DatumTokenizer is not configured correctly. It should look like this.

datumTokenizer: Bloodhound.tokenizers.obj.whitespace('country'),

Here is the demon

, , , .

+5

, , json ...

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);
  }
});
+5

More articles:


All Articles