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

我使用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将URL替换为静态JSON文件（如上面的代码所示）。

这里的关键代码是＆＃34;过滤器＆＃34;将平面JSON标记映射到一个Javascript对象数组的函数，这是Typeahead需要操作的。

Answer 2

来自文档：“虽然可以为较小的数据集使用它，但预取的数据并不意味着包含整个数据集。相反，它应该作为建议的第一级缓存。如果不是请记住此警告，您可能会遇到达到本地存储限制的风险。“

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

希望这有帮助。

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

2 个答案: