How to get typeahead JS working with my json file

Asked 18/3, 2015 at 10:52 Answered 17/2, 2016 at 16:32

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"
    }

]

Americana answered 18/3, 2015 at 10:52 Comment(0)

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.

Dinghy answered 22/3, 2015 at 3:15 Comment(1)

Please could you add a link to documentation for the datumTokenizer option? – Daredeviltry 8/2, 2016 at 12:59

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

Chief answered 17/2, 2016 at 16:32 Comment(0)

Recommended topics

Hot tags