Typeahead and Bloodhound - how to get JSON result

Question

I have the json list of Countries: http://vocab.nic.in/rest.php/country/json

And I'm trying to get country_id and country name with Bloodhound suggestion engine. O tried following code:

var countries = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('country_name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
    prefetch: {
        url: 'http://vocab.nic.in/rest.php/country/json',
        filter: function(response) {
            return response.countries;
        }
    }
});

$('#my-input').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },
    {
        name: 'states',
        displayKey: 'value',
        source: countries.ttAdapter()
    });

Which doesn't work. How should I change the code to make this work?

Is http://vocab.nic.in/rest.php/country/json in the same domain as your website? If not then you'll need to use "remote" instead of "prefetch" — Ben Smith, Mar 30 '14 at 22:04

Jens A. Koch · Accepted Answer · 2015-10-28T09:48:51.050

16

// instantiate the bloodhound suggestion engine
var countries = new Bloodhound({  
  datumTokenizer: function(countries) {
      return Bloodhound.tokenizers.whitespace(countries.value);
  },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: "http://vocab.nic.in/rest.php/country/json",
    filter: function(response) {      
      return response.countries;
    }
  }
});

// initialize the bloodhound suggestion engine
countries.initialize();

// instantiate the typeahead UI
$('.typeahead').typeahead(
  { hint: true,
    highlight: true,
    minLength: 1
  }, 
  {
  name: 'countries',
  displayKey: function(countries) {
    return countries.country.country_name;        
  },
  source: countries.ttAdapter()
});

Example Codepen

Typeahead Output

Output of Typeahead

Notes:

data on your server = "prefetch".
data from outside = "remote"

edited Oct 28 '15 at 09:48

answered Mar 29 '14 at 13:08

Jens A. Koch

39,862
13
113
141

Thanks, looks good, but gives me `Uncaught TypeError: Cannot call method 'split' of undefined ` in bloodhound.min.js – user1049961 Mar 29 '14 at 16:31
1

in the datumTokenizer i used countries.countries, which must be countries.value. Updated code and Codepen accordingly. Chrome is clowny to me, use firefox :) – Jens A. Koch Mar 29 '14 at 17:04
4

This solution no longer works. I tried it myself, and also on your codepen example. – Dean Jun 30 '15 at 17:41
1

True, stopped working. Well, its over a year old. I guess, one of the APIs changed again. – Jens A. Koch Jun 30 '15 at 19:41
I've updated the code so that it works again. The problem was the "prefetch"ing of the data. I've changed "prefetch" to "remote" . Updated the Codepen accordingly. – Jens A. Koch Oct 28 '15 at 09:49
1

I know it's been a while since this was written, codepen doesn't seem to work again ... try searching for 'Bulgaria'. I get the same list as in your screenshot. – Stephan Luis Nov 12 '16 at 21:57
1

it displays 5 result always on any country search ... i.e. `Bnagladesh` – StreetCoder Jan 11 '17 at 06:10
4

I apologize. To be honest, i think twitter gave up on typeahead.js. We look at 13000 stars, a full bugtracker with no maintainer and a broken software, last release 2015. I think that speaks for itself, or not? ... So, try one of the forks: https://github.com/corejavascript/typeahead.js --- I believe they fixed this issue. Not tested. Feel also free to modify my codepen exchanging the typeahead.js against the script of the fork. Regards, Jens – Jens A. Koch Jan 11 '17 at 19:07
FYI, the codepen is not working because of http/https - The page at 'https://codepen.io/anon/pen/NGMvJQ' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://vocab.nic.in/rest.php/country/json'. – Tim Ramsey Oct 04 '17 at 17:06

score 1 · Answer 2 · answered Sep 16 '19 at 14:33

NOTE: if you do all this and it still is not working examine your data.json file (whatever you have named it)

example of good format: https://github.com/twitter/typeahead.js/blob/gh-pages/data/countries.json

['data1','data2',.....]

I was tripped up on out of place quote.

Typeahead and Bloodhound - how to get JSON result

2 Answers2

Linked