Autocomplete 自动补全

'use client'

import { useState } from 'react'
import { Autocomplete, FormField, Stack, Text } from '@hina-ui/react'

const candidates = ['Vue', 'React', 'Svelte', 'Solid', 'Angular']

export default function Demo() {
  const [text, setText] = useState('')
  const options = candidates
    .filter(label => label.toLowerCase().includes(text.toLowerCase()))
    .map(label => ({ value: label, label }))

  return (
    <Stack className="w-full max-w-sm">
      <FormField label="框架" description="选择建议，也可以保留自己输入的文字。">
        <Autocomplete
          value={text}
          onValueChange={setText}
          options={options}
          placeholder="输入框架名称"
        />
      </FormField>
      <Text tone="muted" size="sm">
        文本：{text || '—'}
      </Text>
    </Stack>
  )
}

'use client'

import { useEffect, useState } from 'react'
import { Search } from 'lucide-react'
import {
  Autocomplete,
  FormField,
  Stack,
  Text,
  type AutocompleteOption,
  type CompletionContext,
} from '@hina-ui/react'

interface TagPage {
  data: { items: { id: number; name: string; nameEn: string }[] }
}

export default function Demo() {
  const [text, setText] = useState('')
  const [search, setSearch] = useState('')
  const [keyword, setKeyword] = useState('')
  const [options, setOptions] = useState<AutocompleteOption[]>([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(false)

  useEffect(() => {
    const timer = setTimeout(() => setKeyword(search), 250)
    return () => clearTimeout(timer)
  }, [search])

  function query(context: CompletionContext) {
    if (search === context.text) return
    setSearch(context.text)
    setOptions([])
    setLoading(!!context.text.trim())
    setError(false)
  }

  useEffect(() => {
    const controller = new AbortController()
    if (!keyword.trim()) {
      setOptions([])
      setLoading(false)
      return () => controller.abort()
    }
    setLoading(true)
    setError(false)
    fetch('/demo/tags.json', { signal: controller.signal })
      .then(async response => {
        if (!response.ok) throw new Error(String(response.status))
        const result = (await response.json()) as TagPage
        if (controller.signal.aborted) return
        setOptions(
          result.data.items
            .filter(tag => tag.name.toLowerCase().includes(keyword.trim().toLowerCase()))
            .slice(0, 10)
            .map(tag => ({ value: tag.id, label: tag.name })),
        )
      })
      .catch(() => {
        if (!controller.signal.aborted) setError(true)
      })
      .finally(() => {
        if (!controller.signal.aborted) setLoading(false)
      })
    return () => controller.abort()
  }, [keyword])

  return (
    <Stack className="w-full max-w-sm">
      <FormField label="标签搜索" description="输入时请求候选，也允许保留候选之外的文本。">
        <Autocomplete
          value={text}
          onValueChange={setText}
          options={options}
          loading={loading}
          placeholder="试试「小说」或「音乐」"
          onQuery={query}
          leading={<Search />}
          empty={
            error
              ? '候选加载失败，修改文字后重试。'
              : text.trim()
                ? '没有建议，仍可使用当前文本。'
                : '输入文字搜索标签。'
          }
        />
      </FormField>
      <Text tone="muted" size="sm">
        文本：{text || '—'}
      </Text>
    </Stack>
  )
}

import { Autocomplete, FormField, Stack } from '@hina-ui/react'

const options = [
  { value: 'http', label: 'entry:http' },
  { value: 'rpc', label: 'entry:rpc' },
]

export default function Demo() {
  return (
    <Stack className="w-full max-w-sm" gap="lg">
      <FormField label="小号">
        <Autocomplete options={options} size="sm" placeholder="输入查询" />
      </FormField>
      <FormField label="次级形态">
        <Autocomplete options={options} variant="secondary" placeholder="输入查询" />
      </FormField>
      <FormField label="大号">
        <Autocomplete options={options} size="lg" placeholder="输入查询" />
      </FormField>
      <FormField label="校验失败" error="请输入状态值。">
        <Autocomplete options={[]} defaultValue="status:" />
      </FormField>
      <FormField label="只读">
        <Autocomplete options={options} defaultValue="entry:http" readonly />
      </FormField>
      <FormField label="禁用" disabled>
        <Autocomplete options={options} defaultValue="entry:http" />
      </FormField>
    </Stack>
  )
}

'use client'

import { useRef, useState } from 'react'
import * as v from 'valibot'
import { Autocomplete, Button, Form, FormField, Text, type FormHandle } from '@hina-ui/react'

const candidates = ['Vue', 'React', 'Svelte', 'Solid', 'Angular']

const schema = v.object({
  framework: v.pipe(v.string(), v.trim(), v.nonEmpty('请输入框架名称')),
})

export default function Demo() {
  const form = useRef<FormHandle>(null)
  const [values, setValues] = useState({ framework: '' })
  const [saved, setSaved] = useState('')
  const options = candidates
    .filter(label => label.toLowerCase().includes(values.framework.toLowerCase()))
    .map(label => ({ value: label, label }))

  async function save(data: unknown) {
    await new Promise(resolve => setTimeout(resolve, 600))
    setSaved((data as { framework: string }).framework)
  }

  return (
    <Form ref={form} values={values} rules={schema} className="w-full max-w-sm" onSubmit={save}>
      {({ submitting }) => (
        <>
          <FormField
            name="framework"
            label="主要框架"
            description="选择建议，也可以填写其他框架。"
            required
          >
            <Autocomplete
              value={values.framework}
              onValueChange={framework => setValues({ ...values, framework })}
              options={options}
              name="framework"
              placeholder="选择或输入框架名称"
              onSubmit={() => void form.current?.submit()}
            />
          </FormField>
          <Button type="submit" loading={submitting} className="self-start">
            保存
          </Button>
          {saved && (
            <Text role="status" tone="muted" size="sm">
              已保存：{saved}
            </Text>
          )}
        </>
      )}
    </Form>
  )
}