Ajax onkey事件

Question

我正在使用带有ajax的onkey事件来搜索客户输入的输入。我得到了客户键入的字符串列表。问题是我不知道如何在文本框下显示字符串列表，客户可以从中选择一个。

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

                    });


    });
};

Answer 1

试试这个：

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

Answer 2

最佳解决方案 - 你不这样做:)你正在尝试进行自动提示，因为我会考虑自动完成，例如http://jqueryui.com/autocomplete/。

但如果你想手动完成：

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