typeahead, bloodhound: zdalny działa, ale nie prefetch

Question

Chcę użyć prefetch i nie mogę go uruchomić! Oto mój kod:

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

To nie działa.

Jeśli użyję zdalnego zamiast wstępnego ładowania, działa!

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

Nie mogę potwierdzić.

Czy ktoś może mi pomóc?

Answer 1

Zadziwiająco to działało dziś rano! Więc zmusiło mnie to do myślenia, że ​​chodziło o pamięć podręczną ... I tak było! Dodanie metody clearPrefetchCache() przed zainicjowaniem ogara polubiło.

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

myślę, że nie wykazują żadnych sugestii, ponieważ jest buforowane pustą listę.

Answer 2

Prawdopodobnie próbujesz wstępnie pobrać dane wcześniej niż urlPrefetch pobiera wartość. Spróbuj zrzucić urlPrefetch do konsoli i sprawdzić, czy ma poprawny adres URL.

Answer 3

Dzieje się tak, ponieważ system z nagłówkiem załadował już dane z adresu URL pobierania wstępnego i zapisał go w numerze localStorage. W tym czasie dane są w localStorage, pobieranie wstępne nie jest wywoływane.

Spróbuj zmienić opcję pobierania wstępnego, jak poniżej, i ponownie załaduj stronę. Prefetch zostanie wywołany, ponieważ nie ma żadnych danych związanych z nowym cacheKey w localStorage.

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

Możesz również sprawdzić lokalną pamięć masową za pomocą narzędzi programistycznych Chrome.

próby usunięcia danych lokalnej pamięci masowej i przeładuj stronę. Prefetch uruchomi się.

Aby usunąć dane localStorage przed inicjalizacją Bloodhound, należy wywołać prefetch w każdym czasie inicjalizacji.

localStorage.removeItem("YOUR CACHEKEY"); 

// Bloodhound initialization with YOUR CACHEKEY. 

clearPrefetchCache() przed initialize() jest lepszy, myślę.

Answer 4

Przebiegłem przez twoje pytanie, mając problemy z uzyskaniem prefetch, mimo że działało prawidłowo. Po raz pierwszy pracowałem przy problemach z buforowaniem (ponieważ wcześniej było to problemem), ale wciąż nie działało.

Następnie zaimplementowałem templates w maszynie do pisania, dzięki czemu mogłem uzyskać informacje zwrotne dotyczące tego, co się działo, gdy kliknąłem i wpisałem w polu, i nic się nie stało. Mój szablon notFound pojawił się. Wydawało mi się to dziwne, ponieważ widziałem, jak prefetch trafił na serwer. Dzięki wynikom debugowania na serwerze mogłem również powiedzieć, że serwer generował właściwą odpowiedź json.

Podczas sprawdzania jsona zauważyłem, że nie ma białych znaków, a mój bloodhound datumTokenizer został skonfigurowany jako Bloodhound.tokenizers.whitespace. To spowodowało, że głębiej wniknąłem w to, jak powinny działać tokenizery.

Znalazłem to bardzo pomocne: https://github.com/twitter/typeahead.js/blob/master/doc/migration/0.10.0.md#tokenization-methods-must-be-provided

Mój problem został rozwiązany po włączeniu do:

datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); 

(gdzie .value jest własnością json chcę szukać)