Typeahead.js-预取动态php生成的JSON

Question

我使用Typeahead.js进行自动建议，我的代码是：

var job_scopes = new Bloodhound({
    datumTokenizer: function(d) {
        return Bloodhound.tokenizers.whitespace(d.value);
    },queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 100,
    remote: {
        url: 'http://www.domain.com/json.php?action=job_title&q=%QUERY'
    }
});
job_scopes.initialize();

这很好，但我想将其更改为prefetch，以便能够在JSON中使用tokens，并在Bloodhound上留下基于令牌的返回结果。

我不能简单地创建静态JSON，因为我一直将建议项添加到数据库中。

有没有一种方法可以动态预取json？

Answer 1

来自文档："虽然对于较小的数据集可以不受影响，但预取的数据并不意味着包含整个数据集。相反，它应该充当建议的一级缓存。如果不记住这一警告，您将面临达到本地存储限制的风险。"

https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md#prefetch

我不知道你正在检索多少数据，但最好调用ajax来获取数据，然后在收到响应时将其加载到Bloodhound实例中。

下面是一个使用jQuery ajax调用的示例：

//Let's assume that the data you get back from the server is an array of objects
//data = [{value: 'a'}, {value: 'b'}, {value: 'c'}];
$.get( "http://example.com/your-data", function(data) {
  var bh = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: data
  });
  var dataset = {
    name: "My-dataset-name",
    displayKey: "value",
    source: bh.ttAdapter()
  };
  var ta = $(".typeahead").eq(0).typeahead(
    {
      hint: true
      highlight: true
      minLength: 1
    },
    datasetStates
    );
  ta.on('typeahead:selected', someFunctionToHandleEvent);
});

希望这能有所帮助。

Answer 2

我写了一个使用预取的Typeahead示例。此示例从远程源检索JSON数据：

http://jsfiddle.net/Fresh/1hrk0qso/

为了从远程源预取JSON，Bloodhound对象实现如下：

var countries = new Bloodhound({
 datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
 queryTokenizer: Bloodhound.tokenizers.whitespace,
 prefetch: {
 url: 'https://cdn.rawgit.com/twitter/typeahead.js/gh-pages/data/countries.json',
  filter: function (countries) {
      return $.map(countries, function (country) {
          return {
              name: country
          };
      });
  }
 }
});

您将用返回动态生成的JSON的URL替换静态JSON文件的URL（如上面的代码所示）。

这里的关键代码是"filter"函数，它将平面JSON令牌映射到一个Javascript对象数组，而这正是Typeahead需要操作的。