Autocomplete Input Datalist in jQuery
Ecco un esempio di codice dinamico che utilizza l’autocomplete input datalist di jQuery:
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete Input Datalist jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<label for="autocomplete-input">Cerca un frutto:</label>
<input type="text" id="autocomplete-input" list="fruits">
<datalist id="fruits">
<option value="Mela">
<option value="Banana">
<option value="Arancia">
<option value="Kiwi">
<option value="Pera">
</datalist>
<script>
$(document).ready(function(){
$("#autocomplete-input").on("input", function(){
var inputValue = $(this).val().toLowerCase();
$("#fruits option").filter(function(){
$(this).toggle($(this).val().toLowerCase().indexOf(inputValue) > -1)
});
});
});
</script>
</body>
</html>In questo esempio, abbiamo un input di testo con un id di “autocomplete-input” e un list di “fruits”. Abbiamo anche un datalist con un id di “fruits”, che contiene un elenco di frutti rappresentati come opzioni. Quando l’utente inizia a digitare nel campo di input, jQuery ascolta l’evento di input e filtra le opzioni del datalist in base al valore digitato dall’utente. Le opzioni che non contengono il valore inserito vengono nascoste tramite il metodo .toggle(), mentre le opzioni che lo contengono vengono visualizzate.
Questo codice è dinamico perché i frutti nell’elenco possono essere facilmente aggiunti o rimossi, e l’elenco di opzioni verrà filtrato in modo dinamico ogni volta che l’utente inizia a digitare nel campo di input.
