新しい<datalist>
が一般的に非常に便利だとわかりましたが、その提案は十分には見えません。 javascriptを使用してデータリストの提案を表示する方法はありますか?javascriptを使用してデータリストの提案を表示するには?
例として、<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>
、提案の完全なリストは、入力が空である場合にのみ表示され、既にフォーカスを有しており、ユーザは、入力をクリックします。下向き矢印は提案を表示しません。単純に値を減らします。
私は提案をより目立たせたいと思います。例として、提案のリストを開くことになっているボタンを追加しました。 onClickハンドラには何を入れますか?
私はこの例ではChrome、jQuery、数値入力を使用しましたが、これらのすべてから独立した汎用ソリューションを希望します。