user1049961 user1049961 - 5 months ago 144
jQuery Question

Typeahead and Bloodhound - how to get JSON result

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?

Answer
// 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"