Ajax onkey事件

I am using onkey event with ajax for searching the customer typed input. I got the list of string of what customer typed. The problem is I am not sure how to display the list of string under the text box where customer can select one from that.

<input id="apple" name="apple" type="text" value="" onKeyup="showData(this.value);"/>

function showData(value){

    $.ajax({
        type: "GET",
        cache: false,
        url: "/search/getResults=" + value,
        data: "",
        success:function(ListOfString){

            $.each(ListOfString, function(index, val)
                    {

                    });


    });
};

Try this:

<input id="apple" name="apple" type="text" value="" onKeyup="showData(this.value);"/>
<div id="result"></div>

(...)
success:function(ListOfString){
    for(var index in ListOfString){
        $("#result").append("<p>"+ListOfString[index]+"</p>");
    }
}

Best solution-you don't:) You are trying to do a autosuggest, for that I would preffer an autoutocomplete, like http://jqueryui.com/autocomplete/ .

But if you want to do it manually:

<input id="apple" name="apple" type="text" value="" onKeyup="showData(this.value);"/>
<div id="apply-suggestions"></div>
<script>
...
function showSugestions(suggestions){

var container = $('#apply-suggestions').empty();
$.each(suggestions, function(suggestion){
  $('<div></div>',{class: 'suggestion-item'}).text(suggestion).appendTo(container);
});
}

$('#suggestions > .suggestion-item').on('click',function(){
 console.log('Do something with it...');
});