使用html5和javascript的下拉建議框

Question

我已經在這個問題上進行了詳盡的搜索，大多數時候都以<datalist>標簽結尾。 但是在這種情況下，如果用戶犯了拼寫錯誤，則不會顯示選項。 這就是我的問題。

我有一個輸入搜索文本框。

<input type = "text" name = "search" onkeyup = "someFunc()" />

在javascript someFunc函數中，我進行了ajax調用並檢索數據，並將值放入要顯示為建議的數組中。

<script>
function someFunc(){
//ajax call
suggestionArray = array(); // assume the array contains the values
}
</script>

現在，該數組的內容必須顯示為建議，例如從輸入搜索框的下拉列表，並且應該能夠使用向上箭頭鍵進行導航。 （就像Google搜索一樣）

提前致謝！

編輯1 ::

我希望將數組中的所有值顯示為建議。

編輯2 ：：

我的服務器端代碼處理了要顯示的適當建議，服務器代碼返回了一組建議。 現在必須將此數組顯示給用戶。 因此，如果關鍵字always且用戶鍵入了aways ，則將always顯示數組中可能的值之一，該值必須顯示為建議。

Answer 1

嘗試這樣，使用jquery-ui插件：

<input type='text' title='Tags' id='tags' />

$(document).ready(function() {

var aTags = ["ask","always", "all", "alright", "one", "foo", "blackberry",   "tweet","force9", "westerners", "sport"];

$( "#tags" ).autocomplete({
    source: aTags
});

});

查看筆式演示： http : //codepen.io/anon/pen/KVOBYb