overleaf-cep/services/web/frontend/js/features/contact-form/search.js

import _ from 'lodash'
import { formatWikiHit, searchWiki } from '../algolia-search/search-wiki'
import { sendMB } from '../../infrastructure/event-tracking'

export function setupSearch(formEl) {
  const inputEl = formEl.querySelector('[name="subject"]')
  const resultsEl = formEl.querySelector('[data-ol-search-results]')
  const wrapperEl = formEl.querySelector('[data-ol-search-results-wrapper]')

  let lastValue = ''
  function hideResults() {
    wrapperEl.setAttribute('hidden', '')
  }
  function showResults() {
    wrapperEl.removeAttribute('hidden')
  }

  async function handleChange() {
    const value = inputEl.value
    if (value === lastValue) return
    lastValue = value
    if (value.length < 3) {
      hideResults()
      return
    }

    try {
      const { hits, nbHits } = await searchWiki(value, {
        hitsPerPage: 3,
        typoTolerance: 'strict',
      })
      resultsEl.innerText = ''

      for (const hit of hits) {
        const { url, pageName } = formatWikiHit(hit)
        const liEl = document.createElement('li')

        const linkEl = document.createElement('a')
        linkEl.className = 'contact-suggestion-list-item'
        linkEl.href = url
        linkEl.target = '_blank'
        liEl.append(linkEl)

        const contentEl = document.createElement('span')
        contentEl.innerHTML = pageName
        linkEl.append(contentEl)

        const iconEl = document.createElement('i')
        iconEl.className = 'material-symbols dropdown-item-trailing-icon'
        iconEl.textContent = 'open_in_new'
        iconEl.setAttribute('aria-hidden', 'true')
        iconEl.translate = false
        linkEl.append(iconEl)

        resultsEl.append(liEl)
      }
      if (nbHits > 0) {
        showResults()
        sendMB('contact-form-suggestions-shown')
      } else {
        hideResults()
      }
    } catch (e) {
      hideResults()
    }
  }

  inputEl.addEventListener('input', _.debounce(handleChange, 350))

  // display initial results
  handleChange()
}