typeahead,bloodhound:远程工作但不预取

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已经从prefetch url加载了你的数据并将其存储在localStorage.在数据输入时localStorage,不会调用预取.

尝试更改cacheKey下面的预取选项并重新加载页面.Prefetch将调用,因为没有数据绑定到新的cacheKey中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()我认为之前更好.