javascriptを使用して自動補完候補を表示するブラウザを起動できますか？

Question

私は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

Answer 1

jsFiddle Demo

あなたは、単に最初のクリックでオートコンプリート機能を表示したい場合は、表示されるように、それをトリガするために、いくつかの焦点検出を行うことができます。ユーザが入力上でマウスを押すと、入力フォーカスを与えることができます。クリックイベントがバブルし、入力は入力が2回クリックされたと考えられ、オートコンプリートが表示されます。

$('#grade').mousedown(function(){ 
if(document.activeElement == this)return; 
$(this).focus(); 
}); 

Answer 2

jsFiddle Demo

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

$('#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); 
} 
});