通过表单自动完成

Question

我打算使用 remix.run 构建自动完成功能，但后来我想到，在每次提交后 select/focus 将过于依赖路由和表单来输入，这无法产生良好的用户体验。用户将在表单中输入一些东西，表单被提交，他等待响应，然后输入再次聚焦，这里的 ux 是 instantsearch/autocomplete.

Answer 1

您需要的是 useFetcher 挂钩 Remix 导出。这个钩子可以让你从任何路由的加载器中获取数据而不会导致导航，它是为这种 UI 添加的。

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)
}

通过表单自动完成

Autocomplete through form

reactjs

remix.run