Как показать предложения с помощью javascript?

Я считаю, что новый <datalist> вообще очень полезен, но я думаю, что предложения недостаточно заметны. Есть ли способ вызвать отображение предложений datalist с помощью javascript?

В качестве примера у меня есть datalist на <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>

В Chrome полный список предложений отображается только тогда, когда вход пуст, уже имеет фокус, а затем пользователь нажимает на вход. Стрелка вниз не показывает предложения - она ​​просто уменьшает значение.

Я хотел бы сделать предложения более заметными. В качестве примера я добавил кнопку, которая должна была открыть список предложений. Что я помещаю в обработчик onClick?

Я использовал Chrome, jQuery и номер ввода в этом примере, но я бы предпочел, чтобы общее решение было независимым от всех этих.

Ответы

Ответ 1

Если вы удалите type = "number", ваши пользователи могут получить раскрывающийся список, используя базовую комбинацию клавиш alt + downarrow.

Если это не работает для вас. Я предлагаю использовать гибридный подход, например https://github.com/mmurph211/Autocomplete