web-dev-qa-db-ja.com

typeahead、bloodhound：リモートは機能しますが、プリフェッチはしません

プリフェッチを使用したいのですが、動作させることができません。これが私のコードです：

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

我慢できない。

誰かが私を助けることができますか？

typeaheadprefetchbloodhound
14
boblemar

これは、typeaheadがプリフェッチURLからデータを既にロードし、それをlocalStorageに保存しているためです。データがlocalStorageにあるとき、プリフェッチは呼び出されません。

以下のようにcacheKeyプリフェッチオプションを変更して、ページをリロードしてみてください。 localStorageに新しいcacheKeyに関連付けられたデータがないため、プリフェッチが呼び出されます。

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

chrome開発者ツールを使用してローカルストレージを確認することもできます。

enter image description here

ローカルストレージデータを削除して、ページをリロードしてみてください。プリフェッチが呼び出されます。

Bloodhoundの初期化が初期化のたびにプリフェッチを呼び出す前にlocalStorageデータを削除すること。

_localStorage.removeItem("YOUR CACHEKEY");

// Bloodhound initialization with YOUR CACHEKEY.
_

clearPrefetchCache()の前のinitialize()の方が良いと思います。

10
morizotter

prefetchが正常に機能していても、remoteを機能させるのに問題が発生しているときに、あなたの質問に遭遇しました。私は最初にキャッシュの問題に取り組みましたが（以前は問題だったため）、それでも機能しませんでした。

次に、typeaheadにtemplatesを実装しました。これにより、フィールドをクリックして入力したときに何が起こったのかについてフィードバックを得ることができました。 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プロパティです）

1
davew

おそらく、urlPrefetchが値を取得する前にデータをプリフェッチしようとしています。 urlPrefetchをコンソールにダンプして、有効なURLがあることを確認してください。

0
Sergey Stativa