2013-01-17 9 views
11

新しい<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、数値入力を使用しましたが、これらのすべてから独立した汎用ソリューションを希望します。

答えて

1

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

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

関連する問題