12

新しいもの<datalist>は一般的に非常に便利だと思いますが、提案が十分に表示されていないと思います. 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>

Chrome では、入力が空で、既にフォーカスがあり、ユーザーが入力をクリックした場合にのみ、提案の完全なリストが表示されます。下向き矢印は提案を表示しません。値を減らすだけです。

提案をもっと目に見える形にしたい。例として、候補のリストを開くボタンを追加しました。onClick-handler には何を入れますか?

この例では、Chrome、jQuery、および数値入力を使用しましたが、それらすべてに依存しない一般的なソリューションを好みます。

4

2 に答える 2

0

type="number" を削除すると、ユーザーは基本的な alt+downarrow キーボード ショートカットを使用してドロップダウン リストを取得できます。

それがうまくいかない場合。https://github.com/mmurph211/Autocompleteなどのハイブリッド アプローチを使用することをお勧めします

于 2013-02-06T11:01:15.417 に答える
0

200 を超えるオプションを含むリストから国を選択することは、オートコンプリート コントロールの理想的な候補です。HTML ページで、すべての国の子要素を持つ を直接定義します。

 <datalist id="countrydata">
       <option>Afghanistan</option>
       <option>Åland Islands</option>
       <option>Albania</option>
       <option>Algeria</option>
       <option>American Samoa</option>
       <option>Andorra</option>
       <option>Angola</option>
       <option>Anguilla</option>
       <option>Antarctica</option>
       ...etc...
    </datalist>
于 2021-12-16T15:21:43.190 に答える