# MDN의 검색 자동완성 구현 방법

> Clean Markdown view of GeekNews topic #4762. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=4762](https://news.hada.io/topic?id=4762)
- GeekNews Markdown: [https://news.hada.io/topic/4762.md](https://news.hada.io/topic/4762.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2021-08-05T09:47:41+09:00
- Updated: 2021-08-05T09:47:41+09:00
- Original source: [hacks.mozilla.org](https://hacks.mozilla.org/2021/08/mdns-autocomplete-search/)
- Points: 9
- Comments: 0

## Topic Body

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

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

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

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

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

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

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

## Comments



_No public comments on this page._