Хочу поиск как у MDN

import { Fzf, FzfResultItem } from 'fzf'  // Тип для результата поиска export interface Doc {  url: string  title: string }  // Класс-обертка для поиска export class FuzzySearch {  // Данные для поиска  docs: Doc[]   constructor(docs: Doc[]) {    // Инициализация данных для поиска    this.docs = docs  }   // Метод для поиска  // Принимает строку для поиска и объект с настройками:  // настройкой по умолчанию является  // ограничение на 10 элементов (см. ниже)  search(needle: string, { limit = 10 }): FzfResultItem<Doc>[] {    // Use `let` because we might come up with a new list (aka. shortlist)    // that makes the haystack search much simpler to send to `Fzf()`.     // Используем `let`, поскольку список переданных объектов (данных для поиска)    // в случае, когда строка состоит менее чем из 4 символов,    // будет сокращен    let docs = this.docs    // The list of docs is possible over 10,000 entries (in 2021). If the    // search input is tiny, don't bother with the overhead of Fzf().    // Because we don't even need it when the test is so easy in that    // it just needs to contain a single character.     // Количество объектов для русской локали по состоянию на 24.10.2021 составляет 2910.    // Если строка для поиска состоит менее чем из 4 символов    if (needle.length <= 3) {      const needleLowerCase = needle.toLowerCase()      // The reason this works and makes sense is because the `this.docs` is      // already sorted by popularity.      // So if someone searches for something short like `x` we just take      // the top 'limit' docs that have an `x` in the `.url`. This is      // faster than going through every doc with Fzf.       // Причина, по которой это работает, состоит в том,      // что объекты `this.docs` уже отсортированы по популярности.      // Поэтому если строка для поиска состоит, например, из `x`,      // мы просто берем 10 первых документов, в которых встречается `x`.      // Это быстрее, чем исследование каждого документа с помощью `Fzf`.      // Создаем переменную для сокращенного списка      const shortlistDocs: Doc[] = []      // Перебираем данные для поиска      for (const doc of this.docs) {        // Если в документе встречается строка для поиска (без учета регистра)        if (doc.url.toLowerCase().includes(needleLowerCase)) {          // Помещаем документ в сокращенный список          shortlistDocs.push(doc)          // Прекращаем перебор при достижении лимита          if (shortlistDocs.length === limit) {            break          }        }      }      // Suppose the needle was `yx` and the `limit` as 10, then if we only found      // 9 (which is less than 10) docs that match exactly this, then we might      // be missing out, so we can't use the shortlist.      // For example, there might be more docs like `aaYbbbbXccc` which      // will be found by Fzf() but wouldn't be find in our shortlist because      // the two characters aren't next to each other.       // Предположим, что строка имеет значение `yx`, а `limit` - 10,      // если мы обнаружили только 9 (т.е. менее 10) подходящих документов,      // то не можем использовать сокращенный список.      // Предположим, что в документе имеется строка `aaYbbbbXccc`.      // Такая строка будет обнаружена `Fzf`, но ее не будет в нашем сокращенном списке,      // поскольку символы `y` и `x` не следуют друг за другом.      // Используем сокращенный список, только если его      // длина превышает или равняется лимиту      if (shortlistDocs.length >= limit) {        docs = shortlistDocs      }    }     // Создаем экземпляр поиска    const haystack = new Fzf(docs, {      // Лимит      limit,      // Поле для поиска      selector: (item: Doc) => item.url    })    // All longer strings, default to using the already initialized `Fzf()` instance.    // Для более длинных строк используется существующий экземпляр поиска    return haystack.find(needle)  } }

import React, { useEffect, useMemo, useRef, useState } from 'react' // Хуки для маршрутизации на стороне клиента - // здесь не используются // import { Link, useHistory } from 'react-router-dom'  // Хук для формирования выпадающего списка, // соответствующего всем критериям доступности import { useCombobox } from 'downshift' // Полнотекстовый поиск по `title` import FlexSearch from 'flexsearch' // Хук для выполнения HTTP-запросов import useSWR from 'swr'  // Тип и класс для "неточного" поиска по `url` import { Doc, FuzzySearch } from './fuzzy-search'  // Хук для определения текущей локали - // здесь не используется // import { useLocale } from './hooks'  // Утилиты для получения плейсхолдера и // установки фокуса на инпут при нажатии `/`, // а также тип для пропов для поиска import { getPlaceholder, SearchProps, useFocusOnSlash } from './search-utils'  const SHOW_INDEXING_AFTER_MS = 500  // Типы // Для объекта данных type Item = {  url: string  title: string } // Для поискового индекса type SearchIndex = {  flex: any  fuzzy: FuzzySearch  items: null | Item[] } // Для объекта результатов поиска type ResultItem = {  title: string  url: string  positions: Set<number> }  // Хук для работы с поисковым индексом function useSearchIndex(): readonly [  null | SearchIndex,  null | Error,  () => void ] {  // Состояние инициализации  const [shouldInitialize, setShouldInitialize] = useState(false)  // Состояние индекса  const [searchIndex, setSearchIndex] = useState<null | SearchIndex>(null)  // const locale = useLocale()   // Default to 'en-US' if you're on the home page without the locale prefix.  // По умолчанию локаль имеет значение 'en-US',  // если мы находимся на главной странице без префикса локали   // const url = `${locale}/search-index.json`  // Поиск файла выполняется в директории `public`  const url = `/search-index.json`   // Если состояние инициализации имеет значение `true`,  // вызываем хук `useSWR`:  // первый аргумент - `url`, он же ключ для кеша,  // второй - так называемый `fetcher`, функция  // для запроса-получения данных,  // третий - настройки (в данном случае мы отключаем  // выполнение повторного запроса при установке фокуса).  // Такая сигнатура означает, что хук ожидает инициализации  // https://swr.vercel.app/docs/conditional-fetching  const { error, data } = useSWR<null | Item[], Error | undefined>(    shouldInitialize ? url : null,    async (url: string) => {      // Получаем ответ      const response = await fetch(url)      if (!response.ok) {        // Если возникла ошибка, выбрасываем исключение        // с сообщением в виде текста        throw new Error(await response.text())      }      // Возвращаем ответ в формате `JSON`      return await response.json()    },    // Отключаем повторную валидацию    { revalidateOnFocus: false }  )   // Количество объектов для русской локали  // console.log(data?.length) // 2910   // Выполняем побочный эффект  useEffect(() => {    // Ничего не делаем при отсутствии данных    // или наличии поискового индекса    if (!data || searchIndex) {      return    }     // Создаем поисковый индекс    // `tokenize` - это режим индексации (в данном случае    // используется инкрементальная индексация в прямом направлении, т.е. вперед)    // https://github.com/nextapps-de/flexsearch#tokenizer-prefix-search    const flex = new FlexSearch.Index({ tokenize: 'forward' })     // Данными является массив объектов с заголовками и адресами статей -    // `{ title: 'Заголовок', url: 'https://...' }`    // Перебираем объекты и помещаем заголовок и его индекс (в массиве) в поисковый индекс    data!.forEach(({ title }, i) => {      flex.add(i, title)    })     // Создаем экземпляр неточного поиска    const fuzzy = new FuzzySearch(data as Doc[])     // Обновляем состояние поискового индекса    setSearchIndex({ flex, fuzzy, items: data! })  }, [searchIndex, shouldInitialize, data])   // Хук возвращает мемоизированный массив из 3 элементов:  // поискового индекса, ошибки (которая может иметь значение `null`)  // и функции для обновления состояния инициализации  return useMemo(    () => [searchIndex, error || null, () => setShouldInitialize(true)],    [searchIndex, error, setShouldInitialize]  ) }  // The fuzzy search is engaged if the search term starts with a '/' // and does not have any spaces in it. // Неточный поиск используется в случае, когда строка для поиска // начинается с `/` и не содержит пробелов. // Данная утилита определяет, должен ли использоваться такой поиск function isFuzzySearchString(str: string) {  return str.startsWith('/') && !/\s/.test(str) }  // Утилита для подсветки совпадения // при выполнении полнотекстового поиска // `title` - это подходящий (совпавший) заголовок // `q` - совпадение function HighlightMatch({ title, q }: { title: string; q: string }) {  // FlexSearch doesn't support finding out which "typo corrections"  // were done unfortunately.  // See https://github.com/nextapps-de/flexsearch/issues/99  // `FlexSearch`, к сожалению, не умеет исправлять опечатки   // Split on higlight term and include term into parts, ignore case.  // Разделяем совпадение на части без учета регистра  const words = q.trim().toLowerCase().split(/[ ,]+/)   // $& means the whole matched string  // `$&` означает совпавшую строку целиком  const regexWords = words.map((s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))  const regex = `\\b(${regexWords.join('|')})`  // Разделяем заголовок на части по совпадению  const parts = title.split(new RegExp(regex, 'gi'))   return (    <b>      {/* Перебираем части */}      {parts.map((part, i) => {        const key = `${part}:${i}`        // Если часть является совпадением        if (words.includes(part.toLowerCase())) {          // Подсвечиваем ее          return <mark key={key}>{part}</mark>        } else {          return <span key={key}>{part}</span>        }      })}    </b>  )  // Если ввести в поиске `query`, то данная утилита вернет такую разметку  /*    <b>      <span>Document.</span>      // совпадение      <mark>query</mark>      <span>Selector()</span>    </b>  */ }  // Утилита для генерации "хлебных крошек" для адреса статьи // и подсветки совпадения function BreadcrumbURI({  uri,  positions }: {  uri: string  positions?: Set<number> }) {  // Если имеется совпадение  // `positions` - набор индексов совпавших символов  if (positions && positions.size) {    // Разбиваем строку на массив символов    const chars = uri.split('')     return (      <small>        {chars.map((char, i) => {          // Если символ имеется в совпадении          if (positions.has(i)) {            return <mark key={i}>{char}</mark>          } else {            return <span key={i}>{char}</span>          }        })}      </small>    )  }   // Форматирование `url`  // В оригинальном файле `search-index.json`  // адреса статей начинаются с `/`, который удаляется.  // Также удаляется `docs`  const keep = uri    .split('/')    // .slice(1)    .slice(3)    .filter((p) => p !== 'docs')  // При объединении элементы массива разделяются ' / '  return <small className='search-item-uri'>{keep.join(' / ')}</small>  // Было, например: `https://developer.mozilla.org/ru/docs/Web`,  // стало: `ru / Web` }  // Тип для поискового виджета type InnerSearchNavigateWidgetProps = SearchProps & {  onResultPicked?: () => void  defaultSelection: [number, number] }  // Хук для определения изменения значения инпута function useHasNotChangedFor(value: string, ms: number) {  // Состояние для изменений  const [hasNotChanged, setHasNotChanged] = useState(false)  // Предыдущее значение  const previousValue = useRef(value)   // Побочный эффект для определения наличия изменений  useEffect(() => {    // Если предыдущее значение равняется текущему,    // ничего не делаем    if (previousValue.current === value) {      return    }    // Обновляем предыдущее значение текущим    previousValue.current = value    setHasNotChanged(false)    // while timeouts are not accurate for counting time there error is only    // upwards, meaning they might trigger after more time than specified,    // which is fine in this case    // Здесь речь идет о том, что таймеры не являются    // хорошим средством для точного измерения времени,    // поскольку могут срабатывать по истечении времени,    // больше указанного, но в данном случае такой подход является приемлемым    const timeout = setTimeout(() => {      // Если значение инпута в течение указанного времени не изменилось,      // значит, изменений не было :)      setHasNotChanged(true)    }, ms)    // Очистка побочного эффекта во избежание утечек памяти    return () => {      clearTimeout(timeout)    }    // Хук запускается повторно при изменении значения инпута или задержки  }, [value, ms])   // Возвращаем состояние  return hasNotChanged }  // Виджет для поиска function InnerSearchNavigateWidget(props: InnerSearchNavigateWidgetProps) {  // Пропы:  // значение инпута  // функция для обработки изменения этого значения  // индикатор того, находится ли инпут в фокусе  // функция для обработки изменения состояния фокуса  // функция для сохранения результатов поиска  // выделение по умолчанию  const {    inputValue,    onChangeInputValue,    isFocused,    onChangeIsFocused,    onResultPicked,    defaultSelection  } = props   // Объект истории браузера и текущая локаль -  // здесь не используются  // const history = useHistory()  // const locale = useLocale()   // Получаем поисковый индекс, ошибку и функцию для запуска инициализации поискового индекса  const [searchIndex, searchIndexError, initializeSearchIndex] =    useSearchIndex()   // Ссылка на ипнут  const inputRef = useRef<null | HTMLInputElement>(null)  // Ссылка на форму  const formRef = useRef<null | HTMLFormElement>(null)  // Переменная для выделения  const isSelectionInitialized = useRef(false)   // Отображение результатов зависит от состояния изменений  const showIndexing = useHasNotChangedFor(inputValue, SHOW_INDEXING_AFTER_MS)   // Побочный эффект для инициализации выделения  useEffect(() => {    // Если отсутствует инпут или выделение не инициализировано, ничего не делаем    if (!inputRef.current || isSelectionInitialized.current) {      return    }     // Если инпут находится в фокусе    if (isFocused) {      // Выделение по умолчанию имеет значение `[0, 0]`      inputRef.current.selectionStart = defaultSelection[0]      inputRef.current.selectionEnd = defaultSelection[1]    }    // Инициализируем выделение    isSelectionInitialized.current = true  }, [isFocused, defaultSelection])   // Мемоизированные результаты поиска  const resultItems: ResultItem[] = useMemo(() => {    // Если отсутствует поисковый индекс или инпут, или при инициализации индекса возникла ошибка,    // ничего не делаем    if (!searchIndex || !inputValue || searchIndexError) {      // This can happen if the initialized hasn't completed yet or      // completed un-successfully.      // Это может произойти, если инициализация еще не завершилась      // или завершилась неудачно      return []    }     // The iPhone X series is 812px high.    // If the window isn't very high, show fewer matches so that the    // overlaying search results don't trigger a scroll.    // Данное ограничение позволяет избежать появления    // полосы прокрутки на экранах с маленькой высотой    const limit = window.innerHeight < 850 ? 5 : 10     // Если строка начинается с `/` и не содержит пробелов,    // выполняется неточный поиск    if (isFuzzySearchString(inputValue)) {      // Если значением инпута является `/`      if (inputValue === '/') {        // Возвращаем пустой массив        return []      } else {        // Выполняем поиск,        // удаляя начальный `/`        const fuzzyResults = searchIndex.fuzzy.search(inputValue.slice(1), {          // Возвращается 5 или 10 лучших результатов          limit        })        // Возвращаем массив объектов        return fuzzyResults.map((fuzzyResult) => ({          // Адрес статьи          url: fuzzyResult.item.url,          // Заголовок статьи          title: fuzzyResult.item.title,          // Набор индексов совпавших символов          positions: fuzzyResult.positions        }))      }    } else {      // Full-Text search      // Выполняем полнотекстовый поиск      const indexResults: number[] = searchIndex.flex.search(inputValue, {        // Ограничение        limit,        // Предположения        suggest: true // This can give terrible result suggestions        // Это может приводить к ужасным результатам :)      })      // Возвращаем массив оригинальных объектов      return indexResults.map(        (index: number) => (searchIndex.items || [])[index] as ResultItem      )    }    // Результаты вычисляются повторно при изменении    // значения инпута, поискового индекса или возникновении ошибки  }, [inputValue, searchIndex, searchIndexError])   // Базовый адрес для выполнения HTTP-запроса  // const formAction = `/${locale}/search`  const formAction = `https://developer.mozilla.org/ru-RU/search`  // Формируем полный путь для поиска  const searchPath = useMemo(() => {    // Новая строка запроса    const sp = new URLSearchParams()    // Получается `?q=inputValue`    sp.set('q', inputValue.trim())    // Возвращаем полный путь    // Если ввести в инпуте `qwerty`,    // вернется `https://developer.mozilla.org/ru/search?q=qwerty`    return `${formAction}?${sp.toString()}`  }, [formAction, inputValue])   // Пустой результат - когда ничего не найдено  const nothingFoundItem = useMemo(    () => ({ url: searchPath, title: '', positions: new Set() }),    [searchPath]  )   // Формируем выпадающий список, отвечающий всем критериям доступности  const {    getInputProps,    getItemProps,    getMenuProps,    getComboboxProps,     // Индекс элемента, на которого наведен курсор или который находится в фокусе    highlightedIndex,    // Индикатор того, находится ли меню в открытом состоянии    isOpen,     reset,    toggleMenu  } = useCombobox({    // Результаты поиска или пустой результат в виде массива из одного элемента    items: resultItems.length === 0 ? [nothingFoundItem] : resultItems,    // Значение инпута    inputValue,    // Список по умолчанию будет находится в открытом состоянии    // только при фокусировке на инпуте    defaultIsOpen: isFocused,    // При клике по выделенному (highlightedIndex) результату    onSelectedItemChange: ({ selectedItem }) => {      if (selectedItem) {        // history.push(selectedItem.url)        // Открывается новое окно с соответствующей статьей на MDN        window.open(selectedItem.url, '_blank')        // Значение инпута обнуляется        onChangeInputValue('')        // Выполняется сброс меню        reset()        // Меню скрывается        toggleMenu()        // Расфокусировка        inputRef.current?.blur()        // Если передана функция для сохранения результатов,        // вызываем ее        if (onResultPicked) {          onResultPicked()        }        // Плавная прокрутка в верхнюю часть области просмотра        window.scroll({          top: 0,          left: 0,          behavior: 'smooth'        })      }    }  })   // При нажатии `/` на инпут устанавливается фокус  useFocusOnSlash(inputRef)   // Побочный эффект для инициализации поискового индекса  useEffect(() => {    // Если инпут находится в фокусе    if (isFocused) {      // Выполняем инициализацию      initializeSearchIndex()    }  }, [initializeSearchIndex, isFocused])   // Результаты поиска - рендеринг  // значением переменной является `IIFE` - автоматически вызываемое функциональное выражение  const searchResults = (() => {    // Если меню закрыто, т.е. инпут не находится в фокусе,    // или значение инпута является пустая строка (без учета пробелов),    // ничего не делаем    if (!isOpen || !inputValue.trim()) {      return null    }     // Если при инициализации поискового индекса возникла ошибка    if (searchIndexError) {      return (        // <div className='searchindex-error'>Error initializing search index</div>        <div className='searchindex-error'>          При инициализации поискового индекса возникла ошибка        </div>      )    }     // Если инициализация индекса еще не завершилась    if (!searchIndex) {      // и не было изменений значения инпута на протяжении 500 мс      return showIndexing ? (        <div className='indexing-warning'>          {/* <em>Initializing index</em> */}          <em>Инициализация индекса</em>        </div>      ) : null    }     return (      <>        {/* Если отсутствуют результаты поиска и значением инпута не является `/` */}        {resultItems.length === 0 && inputValue !== '/' ? (          <div            {...getItemProps({              className:                'nothing-found result-item ' +                (highlightedIndex === 0 ? 'highlight' : ''),              // Возвращаем пустой результат              item: nothingFoundItem,              index: 0            })}          >            {/* No document titles found. */}            Подходящих статей не найдено.            <br />            {/* <Link to={searchPath}>              Site search for `{inputValue}`            </Link> */}            {/* Используется полный адрес статьи, сформированный ранее */}            <a href={searchPath} target='_blank' rel='noopener noreferrer'>              Искать на сайте MDN `{inputValue}`            </a>          </div>        ) : (          // Перебираем результаты поиска          resultItems.map((item, i) => (            <div              {...getItemProps({                key: item.url,                className:                  'result-item ' + (i === highlightedIndex ? 'highlight' : ''),                item,                index: i              })}            >              {/* Выполняем подсветку совпадения */}              <HighlightMatch title={item.title} q={inputValue} />              <br />              {/* Формируем хлебные крошки для адреса статьи */}              <BreadcrumbURI uri={item.url} positions={item.positions} />            </div>          ))        )}        {/* Если выполняется неточный поиск */}        {isFuzzySearchString(inputValue) && (          // <div className='fuzzy-engaged'>Fuzzy searching by URI</div>          <div className='fuzzy-engaged'>Выполняется поиск по URI</div>        )}      </>    )  })()   // Рендеринг  return (    <form      action={formAction}      {...getComboboxProps({        // Ссылка на форму        ref: formRef as any, // downshift's types hardcode it as a div        // для `downshift` все есть `div` с точки зрения типов :)        className: 'search-form',        id: 'nav-main-search',        role: 'search',        // Обработчик отправки формы        onSubmit: (e) => {          // This comes into effect if the input is completely empty and the          // user hits Enter, which triggers the native form submission.          // When something *is* entered, the onKeyDown event is triggered          // on the <input> and within that handler you can          // access `event.key === 'Enter'` as a signal to submit the form.           // Здесь речь идет о том, что если инпут является пустым и          // пользователь нажимает `Enter`, выполняется нативная отправка формы.          // Если же инпут не является пустым, отправку формы можно перехватить          // с помощью`event.key === 'Enter'` в обработчике          // события нажатия клавиши `onKeyDown`.          // Отключаем дефолтную обработку отправки формы          e.preventDefault()          // Это сломало кнопку для отправки формы в виде лупы (см. ниже)        }      })}    >      <div className='search-field'>        <label htmlFor='main-q' className='visually-hidden'>          {/* Search MDN */}          Поиск MDN        </label>         <input          {...getInputProps({            type: 'search',            className: isOpen              ? 'has-search-results search-input-field'              : 'search-input-field',            id: 'main-q',            name: 'q',            // Формируем плейсхолдер с помощью утилиты            placeholder: getPlaceholder(isFocused),            // При наведении курсора на инпут            // запускается инициализация поискового индекса            onMouseOver: initializeSearchIndex,            // Метод для обновления состояния фокуса            onFocus: () => {              onChangeIsFocused(true)            },            // и здесь            onBlur: () => onChangeIsFocused(false),            // Обработчик нажатия клавиш            onKeyDown(event) {              // Если нажата клавиша `Escape` и имеется инпут              if (event.key === 'Escape' && inputRef.current) {                // Меню скрывается, инпут очищается                toggleMenu()              } else if (                // Если нажата клавиша `Enter`, инпут не является пустым и отсутствует выделенный результат поиска                event.key === 'Enter' &&                inputValue.trim() &&                highlightedIndex === -1              ) {                // Убираем фокус с инпута                inputRef.current!.blur()                // Отправляем форму                // formRef.current!.submit()                // Переходим на страницу поиска MDN                window.open(searchPath, '_blank')              }            },            // обработчик изменения значения инпута            onChange(event) {              if (event.target instanceof HTMLInputElement) {                onChangeInputValue(event.target.value)              }            },            // Ссылка на инпут            ref: (input) => {              inputRef.current = input            }          })}        />         {/* Кнопка для отправки формы, которая не работала */}        {/* создал пулреквест :) */}        <input          type='submit'          className='search-button'          value=''          aria-label='Поиск'          onClick={() => {            if (inputValue.trim() && inputValue !== '/') {              // history.push(searchPath)              window.open(searchPath, '_blank')            }          }}        />      </div>       {/* Выпадающий список с результатами */}      <div {...getMenuProps()}>        {searchResults && <div className='search-results'>{searchResults}</div>}      </div>    </form>  ) }  // Предохранитель - обработчик ошибок class SearchErrorBoundary extends React.Component {  // Состояние ошибки  state = { hasError: false }   // Регистрация ошибки  static getDerivedStateFromError(error: Error) {    // console.error('There was an error while trying to render search', error)    console.error('В процессе рендеринга поиска возникла ошибка', error)    // Обновляем состояние ошибки    return { hasError: true }  }  render() {    return this.state.hasError ? (      // <div>Error while rendering search. Check console for details.</div>      <div>        В процессе рендеринга поиска возникла ошибка. Загляните в консоль за подробностями.      </div>    ) : (      this.props.children    )  } }  // Экспорт виджета для поиска, обернутого в предохранитель export default function SearchNavigateWidget(  props: InnerSearchNavigateWidgetProps ) {  return (    <SearchErrorBoundary>      <InnerSearchNavigateWidget {...props} />    </SearchErrorBoundary>  ) }