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

I'm using Typeahead.js for my autosuggestions, my code is:

我正在使用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();

This works fine, however I would like to change it to prefetch, to be able to use tokens in my JSON and leave returning results based on tokens on Bloodhound.

这工作正常,但是我想将其更改为预取,以便能够在我的JSON中使用令牌并在Bloodhound上保留基于令牌的返回结果。

I cannot simply create static JSON, as I have the suggestion items added to the db all the time.

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

Is there a way to prefetch the json dynamically?

有没有办法动态预取json?

2 个解决方案

#1

From the docs: "While it's possible to get away with it for smaller data sets, prefetched data isn't meant to contain entire data sets. Rather, it should act as a first-level cache for suggestions. If don't keep this warning in mind, you run the risk of hitting local storage limits."

从文档中可以看出:“虽然可以为较小的数据集使用它,但预取的数据并不意味着包含整个数据集。相反,它应该作为建议的第一级缓存。如果不保留这个警告,你冒着达到本地存储限制的风险。“

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

I don't know how much data you are retrieving but it might be better to make an ajax call to get the data and then load that into your Bloodhound instance when you get the response.

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

Here is an example using a jQuery ajax call:

以下是使用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);
});

Hope this helps.

希望这可以帮助。

#2

I've written an example of Typeahead using prefetch. This example retrieves JSON data from a remote source:

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

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

To prefetch the JSON from a remote source, the Bloodhound object was implemented as follows:

要从远程源预取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
          };
      });
  }
 }
});

You will replace the URL to a static JSON file (shown in the above code) with a URL which returns your dynamically generated JSON.

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

The key code here is the "filter" function which maps the flat JSON tokens to an array of Javascript objects which is what Typeahead needs to operate.

这里的关键代码是“过滤器”功能,它将平面JSON标记映射到一个Javascript对象数组,这是Typeahead需要操作的。

#1