Typeahead和Bloodhound - 如何获取JSON结果

Question

Typeahead和Bloodhound - 如何获取JSON结果

18

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

我正在尝试使用Bloodhound建议引擎获取国家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()
    });

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

- user1049961

3

http://vocab.nic.in/rest.php/country/json和你的网站是否属于同一域名？如果不是，则需要使用“remote”而不是“prefetch”。 - Ben Smith

2个回答

1

注意：如果您已经完成所有步骤但仍然无法正常工作，请检查您的data.json文件（无论您将其命名为什么）。

好的格式示例： https://github.com/twitter/typeahead.js/blob/gh-pages/data/countries.json

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

我被放错位置的引号绊倒了。

- Michael Nelles

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jens A. Koch · Accepted 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()
});

示例Codepen

Typeahead输出

Typeahead输出

备注：

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