6

我正在使用 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？

4

2 回答 2

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 需要操作的。

于 2014-09-08T22:34:36.683 回答
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);
});

希望这可以帮助。

于 2014-09-13T09:05:21.643 回答