MDN의 검색 자동완성 구현 방법
(hacks.mozilla.org)- 사용자가 뭔가 검색하려고 할 때 11,690개의 글 제목 인덱스를 내려 받아서 로컬 검색을 진행
ㅤ→ Brotli 로 압축한 144KB 짜리 JSON파일 (title,url)
ㅤ→ 검색창에 onmouseover, onfocus 시, 또는 문서 전체에서 '/' 입력시 검색 시작으로 인식해서 파일 다운로드 (데이터 파일과 검색 함수 파일)
- 데이터 파일을 다운 받아서 FlexSearch 라이브러리로 인덱스를 구성하고 downshift 로 UI처리
ㅤ→ FlexSearch : 빠른 full-text 검색 라이브러리
ㅤ→ downshift : React용 자동완성 컴포넌트
ㅤ→ 어떤 결과가 먼저 보여질 지는 서버에서 JSON 데이터 구성시 PV에 따라서 정렬하고 그 순서에 따라서 나오게 함