Tech News

제목MDN의 검색 자동완성 구현 방법2021-08-05 12:12
작성자 Level 10

https://hacks.mozilla.org/2021/08/mdns-autocomplete-search/ 

- 사용자가 뭔가 검색하려고 할 때 11,690개의 글 제목 인덱스를 내려 받아서 로컬 검색을 진행

ㅤ→ Brotli 로 압축한 144KB 짜리 JSON파일 (title,url)

ㅤ→ 검색창에 onmouseover, onfocus 시, 또는 문서 전체에서 '/' 입력시 검색 시작으로 인식해서 파일 다운로드 (데이터 파일과 검색 함수 파일)

- 데이터 파일을 다운 받아서 FlexSearch 라이브러리로 인덱스를 구성하고 downshift 로 UI처리

ㅤ→ FlexSearch : 빠른 full-text 검색 라이브러리

ㅤ→ downshift : React용 자동완성 컴포넌트

ㅤ→ 어떤 결과가 먼저 보여질 지는 서버에서 JSON 데이터 구성시 PV에 따라서 정렬하고 그 순서에 따라서 나오게 함

댓글
자동등록방지
(자동등록방지 숫자를 입력해 주세요)