Wie kann ich mit Javascript Vorschläge von Datalisten anzeigen lassen?

Ich finde das Neue<datalist> Im Allgemeinen sehr nützlich, aber ich denke, dass die Vorschläge nicht sichtbar genug sind. Gibt es eine Möglichkeit, die Anzeige von Datenvorschlägen mit Javascript auszulösen?

Als Beispiel habe ich einen Datalisten auf einem<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 wird die vollständige Liste der Vorschläge nur angezeigt, wenn die Eingabe leer ist, bereits den Fokus hat und der Benutzer dann auf die Eingabe klickt. Der Abwärtspfeil zeigt die Vorschläge nicht an - er verringert lediglich den Wert.

Ich möchte die Vorschläge sichtbarer machen. Als Beispiel habe ich eine Schaltfläche hinzugefügt, die die Liste der Vorschläge öffnen soll. Was füge ich in den onClick-Handler ein?

Ich habe in diesem Beispiel Chrome, jQuery und eine Zahleneingabe verwendet, aber ich würde eine generische Lösung bevorzugen, die von all diesen unabhängig ist.

Antworten auf die Frage(1)

Ihre Antwort auf die Frage