通过表单自动完成

Question

我本来打算使用 remix.run 构建自动完成功能，但后来我想到，在每次提交后会过于依赖路由和表单来选择/聚焦输入，这不能产生良好的用户体验。用户将在表单中输入一些内容，表单被提交，他等待响应，然后输入再次获得焦点，这里的用户体验是即时搜索/自动完成。

Answer 1

您需要的是useFetcherRemix 导出的钩子。这个钩子可以让你从任何路径的加载器中获取数据，而不会导致导航，它是为此类 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>
  )
}

类似的事情，在端点中使用提取器加载，导出加载器

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