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,以便能够tokens在我的JSON中使用并在Bloodhound上基于令牌返回结果.

我不能简单地创建静态JSON,因为我总是将建议项添加到数据库中.

有没有办法动态预取json？

Answer 1

我编写了一个使用prefetch的 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（如上面的代码所示）。

这里的关键代码是“过滤器”函数，它将平面 JSON 令牌映射到 Javascript 对象数组，这正是 Typeahead 需要操作的。