14

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

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

我无法理解。

谁能帮我 ？

4

4 回答 4

20

令人惊讶的是它今天早上起作用了！所以它驱使我认为它是关于缓存的......而且它是！在初始化寻血犬之前添加 clearPrefetchCache() 就可以了。

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

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

于 2014-05-12T08:58:41.540 回答
10

这是因为 typeahead 已经从预取 url 加载了您的数据并将其存储在localStorage. 在数据进入时localStorage，不调用预取。

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

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

您还可以使用 chrome 开发人员工具检查本地存储。

在此处输入图像描述

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

要在 Bloodhound 初始化之前删除 localStorage 数据，会在每次初始化时调用其预取。

localStorage.removeItem("YOUR CACHEKEY");

// Bloodhound initialization with YOUR CACHEKEY.

clearPrefetchCache()以前initialize()更好，我想。

于 2015-03-14T17:18:49.287 回答
2

prefetch即使工作正常，我在上班时遇到问题时遇到了您的问题remote。我首先解决了缓存问题（因为它以前是一个问题），但它仍然没有工作。

接下来，我templates在 typeahead 中实现了，所以当我单击并在该字段中键入时，我可以获得一些关于发生了什么的反馈，但什么也没发生。我的notFound模板出现了。这看起来很奇怪，因为我可以看到预取命中了服务器。通过服务器上的调试输出，我还可以告诉服务器正在生成正确的 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 属性在哪里）

于 2017-04-20T18:41:18.693 回答
0

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

于 2014-05-11T03:15:03.290 回答