Autocomplete

Rechercher et sélectionner parmi une liste d’options avec navigation au clavier et filtrage.

Importation

import { Autocomplete } from 'asterui'

Exemples

Autocomplete basique

Autocomplete simple avec options de tableau de chaînes.

import { Autocomplete } from 'asterui'

function App() {
  const countries = [
    'United States',
    'United Kingdom',
    'Canada',
    'Australia',
    'Germany',
    'France',
  ]
  
  return (
      <Autocomplete
        options={countries}
        placeholder="Select a country"
      />
    )
}

export default App

Avec options objets

Autocomplete avec options objets valeur/libellé.

import { Autocomplete } from 'asterui'

function App() {
  const fruits = [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'cherry', label: 'Cherry' },
    { value: 'orange', label: 'Orange' },
  ]
  
  return (
      <Autocomplete
        options={fruits}
        placeholder="Select a fruit"
      />
    )
}

export default App

Contrôlé

Autocomplete contrôlé avec gestion d'état.

Selected: None

import { Autocomplete } from 'asterui'
import { useState } from 'react'

function App() {
  const [country, setCountry] = useState('')
  const countries = [
    'United States',
    'United Kingdom',
    'Canada',
    'Australia',
  ]
  
  return (
      <div>
        <Autocomplete
          value={country}
          onChange={setCountry}
          options={countries}
          placeholder="Select a country"
        />
        <p className="mt-2 text-sm text-base-content/70">
          Selected: {country || 'None'}
        </p>
      </div>
    )
}

export default App

Autoriser l'effacement

Autocomplete avec bouton d'effacement.

import { Autocomplete } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState('Apple')
  const fruits = ['Apple', 'Banana', 'Cherry', 'Orange']
  
  return (
      <Autocomplete
        value={value}
        onChange={setValue}
        options={fruits}
        allowClear
        placeholder="Select a fruit"
      />
    )
}

export default App

Pas de valeurs personnalisées

Autocomplete qui autorise uniquement la sélection parmi les options.

import { Autocomplete } from 'asterui'

function App() {
  const languages = [
    'JavaScript',
    'TypeScript',
    'Python',
    'Java',
    'C++',
  ]
  
  return (
      <Autocomplete
        options={languages}
        allowCustomValue={false}
        placeholder="Select a language"
      />
    )
}

export default App

Filtre personnalisé

Autocomplete avec logique de filtrage personnalisée (commence par).

import { Autocomplete } from 'asterui'

function App() {
  const countries = [
    'United States',
    'United Kingdom',
    'Canada',
    'Australia',
  ]
  
  return (
      <Autocomplete
        options={countries}
        filterOption={(option, input) =>
          option.label.toLowerCase().startsWith(input.toLowerCase())
        }
        placeholder="Type to filter (starts with)"
      />
    )
}

export default App

Différentes tailles

Autocomplete en différentes tailles.

import { Autocomplete, Space } from 'asterui'

function App() {
  const options = ['Option 1', 'Option 2', 'Option 3']
  
  return (
      <Space direction="vertical" size="sm">
        <Autocomplete size="xs" options={options} placeholder="Extra small" />
        <Autocomplete size="sm" options={options} placeholder="Small" />
        <Autocomplete size="md" options={options} placeholder="Medium" />
        <Autocomplete size="lg" options={options} placeholder="Large" />
        <Autocomplete size="xl" options={options} placeholder="Extra large" />
      </Space>
    )
}

export default App

Couleurs

Différentes variantes de couleurs.

import { Autocomplete, Space } from 'asterui'

function App() {
  const options = ['Option 1', 'Option 2', 'Option 3']
  
  return (
      <Space direction="vertical" size="sm">
        <Autocomplete color="primary" options={options} placeholder="Primary" />
        <Autocomplete color="secondary" options={options} placeholder="Secondary" />
        <Autocomplete color="accent" options={options} placeholder="Accent" />
        <Autocomplete color="success" options={options} placeholder="Success" />
        <Autocomplete color="warning" options={options} placeholder="Warning" />
        <Autocomplete color="error" options={options} placeholder="Error" />
      </Space>
    )
}

export default App

Statut de validation

Autocomplete avec statut de validation pour le retour de formulaire.

This field is required

Please verify this value

import { Autocomplete, Space } from 'asterui'

function App() {
  const options = ['Option 1', 'Option 2', 'Option 3']
  
  return (
      <Space direction="vertical" size="sm">
        <div>
          <Autocomplete status="error" options={options} placeholder="Error status" />
          <p className="text-error text-sm mt-1">This field is required</p>
        </div>
        <div>
          <Autocomplete status="warning" options={options} placeholder="Warning status" />
          <p className="text-warning text-sm mt-1">Please verify this value</p>
        </div>
      </Space>
    )
}

export default App

Désactivé

Autocomplete désactivé.

import { Autocomplete } from 'asterui'

function App() {
  const fruits = [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
  ]
  
  return (
      <Autocomplete
        options={fruits}
        disabled
        defaultValue="apple"
      />
    )
}

export default App

Options désactivées

Les options individuelles peuvent être désactivées.

import { Autocomplete } from 'asterui'

function App() {
  const options = [
    { value: 'opt1', label: 'Available option' },
    { value: 'opt2', label: 'Disabled option', disabled: true },
    { value: 'opt3', label: 'Another available' },
  ]
  
  return (
      <Autocomplete
        options={options}
        placeholder="Some options are disabled"
      />
    )
}

export default App

Contenu personnalisé introuvable

Autocomplete avec message personnalisé en cas d'absence de résultats.

import { Autocomplete } from 'asterui'

function App() {
  return (
      <Autocomplete
        options={['Apple', 'Banana', 'Cherry']}
        notFoundContent="Sorry, no matches found!"
        placeholder="Search fruits"
      />
    )
}

export default App

Autocomplete de domaine email

Exemple pratique avec suggestions de domaines email.

Email: None

import { Autocomplete } from 'asterui'
import { useState } from 'react'

function App() {
  const [email, setEmail] = useState('')
  
  const domains = ['@gmail.com', '@yahoo.com', '@outlook.com', '@hotmail.com']
  
  const emailOptions = email.includes('@')
    ? domains.map(domain => email.split('@')[0] + domain)
    : domains.map(domain => email + domain)
  
  return (
      <div>
        <Autocomplete
          value={email}
          onChange={setEmail}
          options={emailOptions}
          placeholder="Enter email address"
        />
        <p className="mt-2 text-sm text-base-content/70">
          Email: {email || 'None'}
        </p>
      </div>
    )
}

export default App

Dans un formulaire

Autocomplete intégré au composant Form.

import { Autocomplete, Form, Button, Modal } from 'asterui'

function App() {
  const handleSubmit = (values: { country: string }) => {
    Modal.success({
      title: 'Form Submitted',
      content: `Country: ${values.country}`,
    })
  }
  
  return (
      <Form onFinish={handleSubmit} initialValues={{ country: 'Canada' }}>
        <Form.Item
          name="country"
          label="Country"
          required
          rules={{ required: 'Please select a country' }}
        >
          <Autocomplete
            options={['United States', 'Canada', 'United Kingdom']}
            placeholder="Select a country"
          />
        </Form.Item>
  
        <Form.Item>
          <Button htmlType="submit" color="primary">
            Submit
          </Button>
        </Form.Item>
      </Form>
    )
}

export default App

API

`Autocomplete`

Propriété	Description	Type	Défaut
`value`	Valeur contrôlée	`string`	-
`defaultValue`	Valeur par défaut (non contrôlée)	`string`	`''`
`onChange`	Callback lorsque la valeur change	`(value: string) => void`	-
`onSelect`	Callback lorsqu’une option est sélectionnée	`(value: string, option: AutocompleteOption) => void`	-
`onSearch`	Callback lorsque la valeur d’entrée change (pour le filtrage asynchrone)	`(value: string) => void`	-
`options`	Tableau d’options à afficher	`string[] \| AutocompleteOption[]`	-
`placeholder`	Texte de placeholder de l’entrée	`string`	`"Type to search..."`
`disabled`	Désactiver l’autocomplete	`boolean`	`false`
`size`	Taille de l’entrée	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
`color`	Variante de couleur de l’entrée	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error'`	-
`status`	Statut de validation (définit aria-invalid)	`'error' \| 'warning'`	-
`allowCustomValue`	Autoriser l’utilisateur à saisir des valeurs personnalisées non présentes dans les options	`boolean`	`true`
`filterOption`	Fonction de filtre personnalisée	`(option: AutocompleteOption, inputValue: string) => boolean`	-
`notFoundContent`	Contenu à afficher lorsqu’aucune option ne correspond	`React.ReactNode`	`"No results found"`
`allowClear`	Afficher le bouton d’effacement lorsque l’entrée a une valeur	`boolean \| { clearIcon?: ReactNode }`	`false`
`onClear`	Callback lorsque le bouton d’effacement est cliqué	`() => void`	-
`open`	État d’ouverture contrôlé du menu déroulant	`boolean`	-
`defaultOpen`	État d’ouverture par défaut (non contrôlé)	`boolean`	`false`
`onOpenChange`	Callback lorsque l’état d’ouverture change	`(open: boolean) => void`	-
`defaultActiveFirstOption`	Activer la première option par défaut lors du filtrage	`boolean`	`true`
`className`	Classes CSS supplémentaires	`string`	-
`data-testid`	ID de test pour les tests	`string`	-

`AutocompleteOption`

Propriété	Description	Type	Défaut
`value`	La valeur de l’option	`string`	-
`label`	Le texte d’affichage de l’option	`string`	-
`disabled`	Si l’option est désactivée	`boolean`	-
`data-testid`	ID de test pour les tests	`string`	-

Haut / Bas - Naviguer parmi les options
Entrée - Sélectionner l’option en surbrillance
Échap - Fermer le menu déroulant et retirer le focus de l’entrée

Accessibilité

Utilise role="combobox" avec les attributs ARIA appropriés
Le menu déroulant utilise role="listbox" avec des éléments role="option"
aria-expanded indique l’état d’ouverture du menu déroulant
aria-activedescendant suit l’option en surbrillance
aria-selected indique l’option actuellement en surbrillance
Utiliser status="error" pour définir automatiquement aria-invalid
Les options désactivées utilisent aria-disabled
Le bouton d’effacement a un aria-label pour les lecteurs d’écran

Autocomplete

Importation

Exemples

Autocomplete basique

Avec options objets

Contrôlé

Autoriser l'effacement

Pas de valeurs personnalisées

Filtre personnalisé

Différentes tailles

Couleurs

Statut de validation

Désactivé

Options désactivées

Contenu personnalisé introuvable

Autocomplete de domaine email

Dans un formulaire

API

Autocomplete

AutocompleteOption

Navigation au clavier

Accessibilité

`Autocomplete`

`AutocompleteOption`