7

HTML データリストを使用して、テキスト入力のオートコンプリート オプションを作成しています。入力をダブルクリックするのではなく、ボタンをクリックしたときに JavaScript から提案を表示できるかどうかを知りたいです。

<datalist id='gradeSuggestions'>
    <option value='A'>A</option>
    <option value='B'>B</option>
    <option value='C'>C</option>
</datalist>

<input name="grade[]" autocomplete="off" list='gradeSuggestions' type='text' />

<input type='button' id='showSuggestions' value='Show Suggestions' />

<script>
$('#showSuggestions').on('click', function(){
   // show the suggestions below the text input 
});
</script>

ここにjsFiddleがあります

4

2 に答える 2

2

jsFiddle Demo

最初のクリックでオートコンプリート機能を表示したいだけの場合は、フォーカス検出を行って表示させることができます。ユーザーが入力の上でマウスを押したときに、入力にフォーカスを与えることができます。クリック イベントがバブルし、入力は入力が 2 回クリックされたと見なし、オートコンプリートが表示されます。

$('#grade').mousedown(function(){
 if( document.activeElement == this )return;
 $(this).focus();
});
于 2013-09-24T21:02:29.120 に答える
0

jsFiddle Demo

提案を強制的に入力にドロップダウンとして表示することはできないようです。.on('inputただし、提案を示す div と一緒にjQuery の API を使用して、探している機能を擬似的に再作成することができます。

$('#grade').on('input focus', function(){
 // show the suggestions below the text input 
 var inp = $("#grade").val().toLowerCase();
 var sgst = [];
 var opts = $("#gradeSuggestions")[0].options;
 for( var opt in opts ){
   if( !opts[opt].hasOwnProperty("nodeName") )continue;
   if( opts[opt].value.toLowerCase().indexOf(inp) > -1 ) sgst.push(opts[opt].value); 
 }
 var s = $("#suggestions");
 s.html('');
 for( var sg in sgst ){
    var sug = $('<div>'+sgst[sg]+'</div>');
    (function(val){
     sug.click(function(){
        $("#grade").val(val);
        $("#grade").focus();
     });
    })(sgst[sg]);
    s.append(sug);
 }
});
于 2013-09-24T20:51:49.573 に答える