MDN Web Docs

lastmod 2024-11-18created 2021-08-053 edits

MDN Web Docs (formerly Mozilla Developer Network, and Mozilla Developer Center) is Mozilla's official website containing development documentation on web standards and Mozilla projects.

Categories

• Web Locks API

MDNs autocomplete search works

• How MDN’s autocomplete search works

How MDN implements search autocomplete:

• When the user is about to search for something, it downloads an index of 11,690 article titles and searches locally
  • A 144KB JSON file compressed with Brotli (title,url)
  • On onmouseover or onfocus on the search box, or when '/' is typed anywhere in the page, it treats this as the start of a search and downloads the files (the data file and the search function file)
• Downloads the data file, builds the index with the FlexSearch library, and handles the UI with downshift
  • FlexSearch : a fast full-text search library
  • downshift : an autocomplete component for React
  • Which results appear first is determined by sorting by PV when the server builds the JSON data, and results appear in that order

See also

• Firefox

Favorite site

• Wikipedia (en) MDN Web Docs