Come visualizzare i suggerimenti del datalist usando javascript?

Question

Trovo che il nuovo <datalist> sia in genere molto utile, ma penso che i suggerimenti non siano abbastanza visibili. C'è un modo per attivare la visualizzazione dei suggerimenti del datalist usando javascript?

Ad esempio, ho un datalist su un <input type="number"> (jsFiddle).

<label> 
    Enter a Fibonacci number: 
    <input type="number" list="fibonacci" min="0" id="myinput"> 
</label> 
<datalist id="fibonacci"> 
    <option value="0"> 
    <option value="1"> 
    <option value="2"> 
    <option value="3"> 
    <option value="5"> 
    <option value="8"> 
    <option value="13"> 
    <option value="21"> 
</datalist> 
<button type="button" id="show-suggestions">Show suggestions</button> 

<script> 
$('#show-suggestions').click(function() { 
    // .showSuggestions() does not exist. 
    // I'd like it to display the suggested values for the input field. 
    $('#myinput').showSuggestions(); 
}); 
</script> 

In Chrome, l'elenco completo di suggerimenti è mostrato solo quando l'ingresso è vuoto, ha già concentrarsi, e l'utente clicca poi sull'ingresso. La freccia rivolta verso il basso non mostra i suggerimenti: decrementa semplicemente il valore.

Mi piacerebbe rendere i suggerimenti più visibili. Ad esempio ho aggiunto un pulsante che dovrebbe aprire la lista dei suggerimenti. Cosa inserisco nel gestore onClick?

Ho usato Chrome, jQuery e un numero di input in questo esempio, ma preferirei una soluzione generica indipendente da tutti questi.

Answer 1

Se si rimuove il tipo = "numero" gli utenti possono ottenere il menu a discesa utilizzando la scorciatoia da tastiera alt + downarrow di base.

Se questo non funziona per voi. Suggerisco di utilizzare un approccio ibrido come https://github.com/mmurph211/Autocomplete