하나 이상의 요소에 jquery selector가 구현되었습니다.

Question

자동 완성 목록을위한 특정 함수가 있습니다. 비록 하나의 텍스트 상자가있는 페이지와 잘 작동합니다. 둘 이상의 텍스트 상자가있는 페이지에서 구현하고 싶습니다. 10 개의 텍스트 상자가 있다고 가정하고 모든 텍스트 상자를 구현하려고합니다. 내가 선택기와 모두 혼란 스러워요. 다른 ID 년대와 같은 흐름을 가지고

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

Answer 1

참고 : 두 개 이상의 요소에 대한 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...// 

    }) 
})