typeaheadのprefetchが動いていないように見える件

typeaheadのprefetchが動いていないように見える件Twitter謹製の検索窓ライブラリtypeahead.js。同梱されているBloodhoundにprefetchというオプションがあるのですが、全然prefetchしてくれない。バグかな!?と思って調べたのでメモしておきます。

いきなり結論

localStorageに既にデータがある場合は、prefetchが動かない。

そういうことなんですね。だから、最初の一回はprefetchしていたんです。でも、1度値を受け取ってブラウザのlocalStorageに格納されるともうprefetchしないんですね。

これは、prefetchのcacheKeyオプションの値を変えると、prefetchが発動することからもわかります。

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

cacheKeyが新しくなると、新しいキーに対応するデータがlocalStorageにないわけですから、prefetchが発動するわけです。

また、Google chromeのデベロッパーツールでも確認することができます。

Localstorage

データが格納されています。右クリックでDeleteができるので、Deleteすると次に画面を開く際にprefetchがちゃんと動きます。

バグじゃなかったんですね。

毎回新しい値をprefetchしたいけどどうする?

cacheKeyオプションで任意のキーを指定したBloodhoundをnewする前に同名のキーでlocalStorageを空にするのが良いと思いますが、どうでしょうか。

localStorage.removeItem("key");

久しぶりにStackoverflowで回答した

この件を探っていたら、typeahead, bloodhound : remote works but not prefetch – Stack Overflowという質問と不完全な回答があったので、回答者としてわかったことを書いておきました。2年ぶり2回目の回答という感じ。

Ls

typeahead, bloodhound : remote works but not prefetch – Stack Overflow

久しぶりに回答できて嬉しい。

Pocket
LINEで送る

You may also like...