Componente
Autocomplete
Campo con suggerimenti mentre si scrive: input daisyUI legato a un <datalist> nativo. Filtraggio, frecce e Invio li gestisce il browser.
- Riferimento
<it-autocomplete>- Classi
ita-fieldita-labelita-inputita-hint- Basato su (daisyUI)
inputjoin- Solo CSS
- Il pannello dei suggerimenti è quello del browser e non si può stilare. Il filtro lavora sulle opzioni già nella pagina: per cercare su un server serve JavaScript (o un form che ricarica la pagina con i risultati). Il valore resta libero: per obbligare una voce dell'elenco usa Select.
- Storybook
- Apri le storie di Autocomplete
Esempio base
Scrivi «Bo» o «ro».
Il comune di residenza.
Mostra il codice HTMLNascondi il codice HTML
<div class="grid gap-6 md:grid-cols-2">
<div class="ita-field">
<label for="autocomplete-1" class="ita-label">Comune</label>
<div class="ita-input"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.9,21.1L16,15.3c1.3-1.5,2-3.4,2-5.3c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.9,0,3.8-0.7,5.3-2l5.8,5.9L21.9,21.1z M10,17c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S13.9,17,10,17z" /></svg><input type="text" id="autocomplete-1" placeholder="Inizia a scrivere" autocomplete="off" list="autocomplete-1-list" aria-describedby="autocomplete-1-hint"></div>
<p id="autocomplete-1-hint" class="ita-hint">Il comune di residenza.</p>
<datalist id="autocomplete-1-list"><option value="Bari" label="BA"></option><option value="Bologna" label="BO"></option><option value="Firenze" label="FI"></option><option value="Genova" label="GE"></option><option value="Milano" label="MI"></option><option value="Napoli" label="NA"></option><option value="Palermo" label="PA"></option><option value="Roma" label="RM"></option><option value="Torino" label="TO"></option><option value="Venezia" label="VE"></option></datalist>
</div>
</div>Senza icona
Mostra il codice HTMLNascondi il codice HTML
<div class="grid gap-6 md:grid-cols-2">
<div class="ita-field">
<label for="autocomplete-2" class="ita-label">Linguaggio di programmazione</label>
<input type="text" id="autocomplete-2" class="ita-input" placeholder="Es. TypeScript" autocomplete="off" list="autocomplete-2-list">
<datalist id="autocomplete-2-list"><option value="C"></option><option value="C++"></option><option value="Go"></option><option value="Java"></option><option value="JavaScript"></option><option value="Kotlin"></option><option value="Python"></option><option value="Rust"></option><option value="Swift"></option><option value="TypeScript"></option></datalist>
</div>
</div>Ricerca con pulsante
Mostra il codice HTMLNascondi il codice HTML
<div class="ita-field">
<label for="autocomplete-3" class="sr-only">Cerca un servizio</label>
<div class="join w-full"><div class="join-item ita-input ita-input-lg"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.9,21.1L16,15.3c1.3-1.5,2-3.4,2-5.3c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.9,0,3.8-0.7,5.3-2l5.8,5.9L21.9,21.1z M10,17c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S13.9,17,10,17z" /></svg><input type="text" id="autocomplete-3" placeholder="Cerca un servizio" autocomplete="off" list="autocomplete-3-list"></div><button type="submit" class="join-item ita-btn ita-btn-primary">Cerca</button></div>
<datalist id="autocomplete-3-list"><option value="Carta d'identità elettronica"></option><option value="Cambio di residenza"></option><option value="Iscrizione all'asilo nido"></option><option value="Pagamento TARI"></option><option value="Permesso ZTL"></option></datalist>
</div>Disabilitato
Mostra il codice HTMLNascondi il codice HTML
<div class="grid gap-6 md:grid-cols-2">
<div class="ita-field">
<label for="autocomplete-4" class="ita-label">Comune</label>
<div class="ita-input"><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.9,21.1L16,15.3c1.3-1.5,2-3.4,2-5.3c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.9,0,3.8-0.7,5.3-2l5.8,5.9L21.9,21.1z M10,17c-3.9,0-7-3.1-7-7s3.1-7,7-7s7,3.1,7,7S13.9,17,10,17z" /></svg><input type="text" id="autocomplete-4" placeholder="Inizia a scrivere" autocomplete="off" list="autocomplete-4-list" disabled></div>
<datalist id="autocomplete-4-list"><option value="Bari" label="BA"></option><option value="Bologna" label="BO"></option><option value="Firenze" label="FI"></option><option value="Genova" label="GE"></option><option value="Milano" label="MI"></option><option value="Napoli" label="NA"></option><option value="Palermo" label="PA"></option><option value="Roma" label="RM"></option><option value="Torino" label="TO"></option><option value="Venezia" label="VE"></option></datalist>
</div>
</div>