Kann ich den Browser dazu veranlassen, Autocomplete-Vorschläge über Javascript anzuzeigen?

Question

Ich benutze den HTML-Dataist, um Autovervollständigungsoptionen für eine Texteingabe zu machen. Ich würde gerne wissen, ob, anstatt auf die Eingabe doppelklicken, wenn ich die Vorschläge auslösen kann, um aus JavaScript zu erscheinen, wenn eine Schaltfläche angeklickt wird.

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

Hier ist ein jsFiddle

Answer 1

jsFiddle Demo

Wenn Sie wollen nur die Funktion zur automatischen Vervollständigung auf dem ersten Klick zeigen, dann können Sie einige Fokuserkennung tun, um es auszulösen zu erscheinen. Wenn der Benutzer die Maus auf die Eingabe drückt, können Sie den Eingabefokus festlegen. Das Klickereignis wird durchgeblubbert und die Eingabe wird glauben, dass die Eingabe zweimal angeklickt wurde, wodurch die automatische Vervollständigung angezeigt wird.

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

Answer 2

jsFiddle Demo

Es ist nicht möglich scheint, die Vorschläge zu zwingen, am Eingang als Dropdown zu zeigen. Sie können jedoch die Funktionalität, die Sie suchen, mit der API .on('input von jQuery pseudo-re-create, neben einem div, das die Vorschläge zeigt.

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