Ajax onkey事件

Question

我正在使用onjax事件和ajax來搜索客戶鍵入的輸入。我得到了客戶輸入的字符串列表。問題是我不知道如何顯示文本框下的字符串列表，客戶可以從中選擇一個。

<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

最好的解決辦法，你不:)你正在嘗試做一個自動提示，爲我會preffer的autoutocomplete，像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...'); 
});