Autocomplete Field

Panoramica

Il componente AutocompleteField è un campo di input con funzionalità di completamento automatico, basato sul componente Autocomplete di Material UI. Consente la selezione da una lista di opzioni, la possibilità di inserire valori custom (free solo) e la gestione della validazione e visualizzazione condizionata della lista.

import { AutocompleteField } from "@itlogix/itlogix-ui";

Proprietà (Props)

Nome	Tipo	Obbligatorio	Default	Descrizione
list	SelectItem[]	sì	-	Lista delle opzioni disponibili, oggetti con id e name.
value	number/string/null	no	null	Valore selezionato (id o stringa).
valueSelected	(idOrValue: number | string | null, name: string) => void	no	-	Callback chiamata al cambio selezione.
label	string	no	-	Etichetta del campo.
placeholder	string	no	-	Testo segnaposto per il campo di input.
required	boolean	no	false	Se true, il campo è obbligatorio.
isDisabled	boolean	no	false	Disabilita l'interazione con il campo.
isFullWidth	boolean	no	false	Espande il campo a tutta larghezza.
mustInsertMinCharNumber	boolean	no	false	Se true, mostra le opzioni solo dopo un numero minimo di caratteri.
nOfMinChar	number	no	3	Numero minimo di caratteri richiesti per mostrare opzioni (se abilitato).
canAddCustomText	boolean	no	false	Permette l'inserimento di testo libero non presente tra le opzioni.
mustShowError	boolean	no	false	Visualizza forzatamente lo stato di errore.

Comportamento

• Se canAddCustomText è true, l'utente può inserire un testo libero anche non presente nella lista.
• Se mustInsertMinCharNumber è true, l'elenco delle opzioni si apre solo se l'input ha almeno nOfMinChar caratteri.
• Mostra uno scheletro (<Skeleton />) se la lista non è ancora disponibile.
• Utilizza match e parse di autosuggest-highlight per evidenziare le parti dell'opzione che corrispondono al testo digitato.

Esempi di utilizzo

Autocomplete semplice

<AutocompleteField
  label="Comune"
  list={comuni}
  value={selectedComuneId}
  valueSelected={(id, name) => setSelectedComuneId(id)}
/>

Autocomplete con testo libero e placeholder

<AutocompleteField
  label="Inserisci titolo"
  placeholder="Scrivi o seleziona"
  list={titoliDisponibili}
  canAddCustomText
  value={valoreTitolo}
  valueSelected={(val, name) => setValoreTitolo(val)}
/>

Autocomplete con attivazione solo dopo 3 caratteri

<AutocompleteField
  label="Città"
  list={citta}
  mustInsertMinCharNumber
  nOfMinChar={3}
  value={selectedCityId}
  valueSelected={(id, name) => setSelectedCityId(id)}
/>

Note aggiuntive

• Supporta disableClearable se il campo è required per evitare che l'utente cancelli il valore con la "X".
• Componente AutocompleteInputField usato come input personalizzato.
• L'opzione selezionata può essere sia un oggetto ({id, name}) sia una stringa libera.

---

AutocompleteField è utile per selezioni con molte opzioni o dinamiche, migliorando l'esperienza utente con ricerca, filtro e suggerimenti intelligenti.