我可以触发浏览器通过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 的

似乎无法强制将输入显示在输入上作为下拉列表。但是，您可以使用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);
 }
});