Typeahead.js远程工作,但预取不起作用

时间:2015-02-05 20:59:45

标签: javascript jquery typeahead.js twitter-typeahead

我在我的网络应用中使用了typeahead.js 0.10.5。出于某些奇怪的原因,通过远程工作获取建议,而预取则被破坏。这里有一些不明显和奇怪的事情。根据开发控制台和Chrome的网络监视器,它甚至不会对页面加载进行查询。当然,当我开始输入时,它会进行查询。

这真让我难过 - 我在这里做错了什么?

    // Instantiate the Bloodhound suggestion engine
    var tags = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      remote: {
        url: '/tags/tags/search.json?q=%QUERY',
        filter: function (taglist) {
            // Map the remote source JSON array to a JavaScript object array
            return $.map(taglist, function (tag) {
                console.log(tag);
                return {
                    value: tag.tag
                };
            });
        }
      },
      prefetch: {
        url: '/tags/tags/search.json?q=',
        filter: function (taglist) {
            // Map the remote source JSON array to a JavaScript object array
            return $.map(taglist, function (tag) {
                console.log(tag);
                return {
                    value: tag.tag
                };
            });
        },      
      }
    });

    // Initialize the Bloodhound suggestion engine
    tags.initialize();

    // Instantiate the Typeahead UI
    $('#search-tags').typeahead(null, {
        displayKey: 'value',
        source: tags.ttAdapter(),
        hint: true,
        highlight: true
    });

2 个答案:

答案 0 :(得分:1)

尝试从浏览器的localStorage中删除条目,然后重新开始。

答案 1 :(得分:1)

默认情况下,Bloodhound对象会在浏览器的本地存储中缓存预取数据,为其分配1天的TTL(生存时间),并且在TTL过期之前不会重新验证它。初始化Bloodhound对象时,可以更改默认设置“cache:false”和/或“ttl:1000”(毫秒)。

预取与缓存有关,但与预先略有不同,因为预取的数据不受服务器发送的Cache-Control标头的限制。它也存在于LocalStorage中,而不是浏览器的缓存中(这就是为什么硬重载或缓存清除不会导致它被重新获取的原因。)

另一方面,远程提取的文件根据Cache-Control标头重新验证。因此,如果服务器允许,浏览器仍可以缓存它们。但是,它们存储在缓存中,而不是存储在LocalStorage中。

LocalStorage中存在每域空间限制(请参阅What is the max size of localStorage values?),因此大型预取将失败,但我不知道typeahead是否正常失败(即使用数据,即使它不能存储它。)