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