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のデベロッパーツールでも確認することができます。

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

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

js読み込み時のみ新しい値をprefetchしたいけどどうする？

engine.clearPrefetchCache();
engine.initialize()

で、localStorageをクリアするのが良いと思います。

Web開発初心者が恐る恐る書きました。