Typeahead, ищейка: удаленные работы, но не предварительная выборка

Я хочу использовать prefetch, и я не могу работать! Вот мой код:

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

Это не работает.

Если я использую remote вместо предварительной выборки, он работает!

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

Я не могу согласиться.

Кто-нибудь может мне помочь?

Ответ 1

Удивительно, но это сработало сегодня утром! Так что это заставило меня подумать, что речь идет о кеше... И это было! Добавление clearPrefetchCache() до инициализации ищейки сделало трюк.

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

Я думаю, что он не показывал никаких предложений, потому что он кэшировал пустой список.

Ответ 2

Это потому, что typeahead уже загрузил ваши данные из URL предварительной выборки и сохранил его в localStorage. В то время, когда данные находятся в localStorage, предварительная выборка не вызывается.

Попробуйте изменить опцию prefetch cacheKey, как показано ниже, и перезагрузите страницу. Prefetch вызывается, потому что нет данных, привязанных к новому кешу в localStorage.

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

Вы также можете проверить локальное хранилище с помощью инструментов разработчика Chrome.

Попробуйте удалить локальные данные и перезагрузить страницу. Prefetch вызывается.

Чтобы удалить данные локального хранилища до инициализации Bloodhound, активирует свою предварительную выборку в каждое время инициализации.

localStorage.removeItem("YOUR CACHEKEY");

// Bloodhound initialization with YOUR CACHEKEY.

clearPrefetchCache() до initialize() лучше, я думаю.

Ответ 3

Я столкнулся с вашим вопросом, когда у меня возникли проблемы с работой 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, которое я хочу выполнить)

Ответ 4

Возможно, вы пытаетесь предварительно извлечь данные раньше, чем urlPrefetch получает значение. Попробуйте сбросить urlPrefetch на консоль и убедитесь, что он имеет действительный URL.