MDNの検索オートコンプリート実装方法
(hacks.mozilla.org)<p>- ユーザーが何かを検索しようとするとき、11,690件の記事タイトルのインデックスをダウンロードしてローカル検索を実行<br />
→ Brotli で圧縮した 144KB の JSON ファイル (`title`,`url`)<br />
→ 検索ボックスで `onmouseover`、`onfocus` 時、またはドキュメント全体で `/` を入力したときに検索開始と見なしてファイルをダウンロード(データファイルと検索関数ファイル)<br />
- データファイルをダウンロードして FlexSearch ライブラリでインデックスを構築し、downshift で UI を処理 <br />
→ FlexSearch : 高速な全文検索ライブラリ <br />
→ downshift : React 向けオートコンプリートコンポーネント<br />
→ どの結果を先に表示するかは、サーバーで JSON データを構成するときに PV に応じて並べ替え、その順序で表示されるようにしている</p>
まだコメントはありません。