Question

我想使用预取，我不能让它工作！这是我的代码：

function initAutocompletion() {
    $("input[data-autocomplete-prefetch-url]").each(function () {
        var $this = $(this);
    var urlPrefetch = $this.data("autocomplete-prefetch-url");
    var prefetch;

    pref = {
        url: urlPrefetch,
        filter: filter
    };

    var bloodHound = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        limit: 10,
        prefetch: pref
    });

    bloodHound.initialize();

    $this
        .typeahead('destroy')
        .typeahead({
            hint: true,
            highlight: true,
            minLength: 1
        },
        {
            displayKey: 'value',
            source: bloodHound.ttAdapter()
        });
    });
 }

function filter(list) {
    return $.map(list, function (v) { return { value: v.toString() }; });
}

它不起作用。

如果我使用远程而不是预取它可以工作！

    var bloodHound = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        limit: 10,
        remote: pref
    });

我无法理解。

任何人都可以帮助我吗？

Answer 1

今天早上很棒！所以它驱使我认为这是关于缓存...它是！在初始化猎犬之前添加clearPrefetchCache（）就可以了。

       bloodHound.clearPrefetchCache();
       bloodHound.initialize();

我认为它没有显示任何建议，因为它已经缓存了一个空列表。

Answer 2

这是因为typeahead已经从预取网址加载了您的数据并将其存储在localStorage中。当数据在localStorage时，不会调用预取。

尝试更改cacheKey预取选项，如下所示，然后重新加载页面。 Prefetch将调用，因为localStorage中没有数据绑定到新的cacheKey。

var engine = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  prefetch: {
    url: "stations.json",
    cacheKey: "change here!"
  }
});

您还可以使用Chrome开发者工具检查本地存储。

enter image description here

尝试删除本地存储数据并重新加载页面。预取将调用。

要在Bloodhound初始化之前删除localStorage数据，以便在每个初始化时调用它的预取。

localStorage.removeItem("YOUR CACHEKEY");

// Bloodhound initialization with YOUR CACHEKEY.

我认为clearPrefetchCache()之前的initialize()更好。

Answer 3

尽管prefetch工作正常，但在遇到remote工作问题时遇到了问题。我首先解决了缓存问题（因为它之前是一个问题），但它仍然没有用。

接下来我在typeahead中实现了templates，这样我就可以获得一些反馈，说明当我点击并输入字段时发生的事情并没有发生任何事情。我的notFound模板正在出现。这看起来很奇怪，因为我可以看到prefetch命中服务器。通过服务器上的调试输出，我还可以告诉服务器正在生成正确的json响应。

当检查json时，虽然我注意到它没有空格，我的猎犬datumTokenizer被配置为Bloodhound.tokenizers.whitespace。这使我深入研究了如何使用标记器。

我发现这非常有帮助： https://github.com/twitter/typeahead.js/blob/master/doc/migration/0.10.0.md#tokenization-methods-must-be-provided

切换到：

后我的问题得到了解决

datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value);

（其中.value是我要搜索的json属性）

Answer 4

可能您试图在urlPrefetch获取值之前预取数据。尝试将urlPrefetch转储到控制台并检查它是否具有有效的URL。

typeahead，bloodhound：远程工作但不预取

4 个答案: