Автозаполнение через форму

Question

Я собирался создать автозаполнение с помощью remix.run, но потом мне пришло в голову, что я буду слишком полагаться на маршрутизацию и формы для выбора / фокусировки ввода после каждой отправки, это не может обеспечить хороший UX. Пользователь вводит что-то в форму, форма отправляется, он ожидает ответа, а затем ввод снова фокусируется, и ux здесь, что это мгновенный поиск / автозаполнение.

Answer 1

Что вам нужно, так это useFetcherкрюк Ремикс экспорта. Этот хук позволяет вам получать данные из загрузчика любого маршрута, не вызывая навигации, он был добавлен для такого рода пользовательских интерфейсов.

      import { Form, useFetcher } from "remix"

export default function Screen() {
  let fetcher = useFetcher()

  function handleChange(event) {
    let value = event.currentTarget.value
    // load data from a route with a loader
    fetcher.load(`/api/autocomplete?query=${value}`)
  }

  return (
    <Form>
      <input type="text" onChange={handleChange} list="suggestions" />
      <datalist id="suggestions">
        {fetcher.data.map(item => {
          return <option key={item.id} value={item.value} />
        })}
      </datalist>
    </Form>
  )
}

Как-то так, а в эндпойнте грузишь фачером экспортируешь загрузчик

      export async function loader({ request }) {
  let url = new URL(request.url)
  let query = url.searchParams.get("query") ?? "";
  let data = await getData(query)
  return json(data)
}