我可以觸發瀏覽器通過JavaScript顯示自動填充建議嗎？

我正在使用html datalist爲文本輸入創建自動完成選項。我想知道如果我點擊一個按鈕時，如果我可以觸發建議從javascript顯示，而不是雙擊輸入。我可以觸發瀏覽器通過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

來源

2013-09-24 Mike

這似乎並不適合我。 – Mike

您正在使用哪種瀏覽器？我相信你不應該在文本輸入框上雙擊或者點擊一個按鈕。我正在使用Chrome查看您的jsFiddle，當我輸入時，自動完成選項會顯示出來。 –

我不想輸入或者。我希望用戶在輸入任何內容之前查看所有建議。 – Mike

jsFiddle Demo

如果您只是想顯示在第一次點擊的自動完成功能，那麼你可以做一些焦點檢測觸發它的出現。當用戶在輸入上按下鼠標時，您可以輸入焦點。點擊事件會冒泡，輸入會認爲輸入被點擊了兩次，導致顯示自動完成。

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

來源

2013-09-24 21:02:29

這似乎是我原來的問題不完全可能，但這個解決方案很有趣，我可能能夠使用它。謝謝。 – Mike

它僅適用於Chrome。 – Badal

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); 
} 
});

來源

2013-09-24 20:51:49

我可以觸發瀏覽器通過JavaScript顯示自動填充建議嗎？

回答

相關問題