2011-12-01 72 views
0

我對自動完成列表有特別的功能。雖然它的工作與頁面有單個文本框很好。我想在具有多個文本框的頁面上實現它。假設我有10個文本框,並且我想實現它。我有點困惑於選擇器和所有。具有這樣的流動有不同的ID的與jquery選擇工具混淆不止一個元素

<input name="track[]" type="text" class="track" maxlength="150" onkeyup="lookup(this.value);" onblur="fill();" id="track_1"/> 
     <div class="suggestionsBox" id="suggestions" style="display: none;"><img src="images/upArrow.png" style="position: relative; top: -12px; left: 50px;" alt="upArrow" /> 
     <div class="suggestionList" id="autoSuggestionsList">&nbsp;</div> 
     </div> 


<input name="track[]" type="text" class="track" maxlength="150" onkeyup="lookup(this.value);" onblur="fill();" id="track_2"/> 
     <div class="suggestionsBox" id="suggestions" style="display: none;"><img src="images/upArrow.png" style="position: relative; top: -12px; left: 50px;" alt="upArrow" /> 
     <div class="suggestionList" id="autoSuggestionsList">&nbsp;</div> 
     </div> 

我的文本框... 我jQuery的功能是...

function lookup(poetname) { 
    if(poetname.length == 0) { 
     // Hide the suggestion box. 
     $('#suggestions').hide(); 
    } else { 
     //alert("Hiiii"); 
     $.post("rpc.php", {queryString: ""+poetname+""}, function(data){ 
      if(data.length >0) { 
       $('#suggestions').show(); 
       $('#autoSuggestionsList').html(data); 
      } 
     }); 
    } 
} // lookup 

function fill(thisValue) { 
    $('#poetname').val(thisValue); 
    setTimeout("$('#suggestions').hide();", 500); 
} 

回答

0

注:你不應該使用一個ID爲一個以上的元素,改用類。 ID應該是唯一的。

您可以在功能只綁定到每個輸入

$(function(){ 
    $("input.track").keyup(function(e){ 
    var poetname = $(this).val() 
    if(poetname.length == 0){ 
     // Hide the suggestion box 
     $(this).find('div.suggestionsBox').hide() 
    } 
    //...rest of code...// 

    }) 
}) 
+0

能否請你寫更多的代碼。我對此感到困惑。 –

+0

最好的學習地點是[JQuery文檔](http://docs.jquery.com/Tutorials:How_jQuery_Works)。嘗試一下,如果出現錯誤,請提出另一個問題!然而,你的解決方案的問題是多個元素具有相同的ID –

+0

實際上我想你重寫我的jQuery代碼...否則我自己嘗試。 –