overleaf/services/web/frontend/js/features/contact-form/search.js
Tim Down 34fc43d59a Merge pull request #19126 from overleaf/td-bs5-contact-modal-react
React version of Contact Us modal

GitOrigin-RevId: 0bef3095f36daa88afdc6172a5531ed11e892047
2024-08-14 08:04:37 +00:00

70 lines
1.9 KiB
JavaScript

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 = 'fa fa-angle-right'
iconEl.setAttribute('aria-hidden', 'true')
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()
}