Typeahead.js remote works, but prefetch doesn't

Question

I'm using typeahead.js 0.10.5 in my web app. For some bizarre reason, fetching suggestions live via remote works, while prefetch is broken. There's something non-obvious and strange going on here. According to the dev console and Chrome's network monitor, it isn't even making a query on page load. It does, of course, make a query when I start typing.

This really has me stumped- what am I doing wrong here?

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

Answer 1

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

Answer 2

The Bloodhound object by default caches prefetched data in the browser's local Storage, assigns it a TTL (time-to-live) of 1 day, and does not revalidate it until the TTL expires. The defaults can be changed setting "cache: false" and/or "ttl: 1000" (milliseconds) when the Bloodhound object is initialized.

Pre-fetching is related, but slightly different than caching, in that pre-fetched data is not subject to Cache-Control headers that the server sends. It also lives in LocalStorage, not in the browser's cache (which is why a hard reload, or a cache clear does not cause it to be re-fetched).

Remote fetched files on the other hand are revalidated subject to Cache-Control headers. So a browser may still cache them if the server allows it. However, they are stored in the cache, not in LocalStorage.

There is a per-domain space limitation in LocalStorage (see What is the max size of localStorage values? ), so large pre-fetches will fail, though I don't know if typeahead fails gracefully (ie, uses the data, even though it cannot store it).