javascript - 我可以触发浏览器通过 javascript 显示自动完成建议吗？

Question

我正在使用 html datalist 为文本输入创建自动完成选项。我想知道是否可以在单击按钮时触发建议从 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

如果您只想在第一次点击时显示自动完成功能，那么您可以进行一些焦点检测以触发它出现。当用户在输入上按下鼠标时，您可以赋予输入焦点。点击事件会冒泡，输入会认为输入被点击了两次，导致自动完成显示。

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

Answer 2

jsFiddle Demo

似乎不可能强制建议在输入中显示为下拉列表。.on('input但是，您可以使用 jQuery 的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);
 }
});