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

希望这对您有所帮助。