使用html5和javascript的下拉建议框

Question

I have googled thoroughly on this question, and most of the times ended up with the <datalist> tag. But in this case if the user commits a spelling mistake, the options will not be shown. So this is my question.

I have an input search text box.

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

In the javascript someFunc funtion, i make an ajax call and retrieve data and put the values in an array which I want to be displayed as suggestions.

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

Now the contents of this array have to be displayed as suggestions, like a dropdown from the input search box, and should be able to navigate using up down arrow keys. (say just like google search)

Thanks in advance!

EDIT 1::

I want all the values in my array to be displayed as suggestions.

EDIT 2::

The appropriate suggestions to be displayed is handled by my server side code, the server code returns an array of suggestions. Now this array has to be displayed to the user. So if the keyword is always and the user typed aways , one of the possible values in the array will be always which has to be displayed as a suggestion.

Answer 1

Try like this, Using jquery-ui plugin:

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

});

check demo in pen: http://codepen.io/anon/pen/KVOBYb