Typeahead和Bloodhound – 如何获得JSON结果

我有国家的json列表: http : //vocab.nic.in/rest.php/country/json

我正在尝试使用Bloodhound建议引擎获取country_id和国家名称。 我试过以下代码:

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

哪个不起作用。 我该如何更改代码才能使其工作?

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

示例Codepen

预先输出

Typeahead的输出

笔记:

  • 您服务器上的数据=“预取”。
  • 来自外部的数据=“远程”