JQuery 자동 완성은 선택시 모든 행을 채 웁니다.

Question

JQuery에 문제가 있습니다. 사용자가 자동 ​​완성 드롭 다운 메뉴 <input class="itemCode">에서 항목을 선택한 후에 <input class="itemDescription">을 채워야합니다. 사용자가 item을 선택할 때만 JQuery가 제대로 작동하며 1 행과 2 행의 입력에 모두 동일한 Item Description이 채워집니다. 나는 그 두 가지 모두가 동일한 클래스를 가지고있는 itemDescription 입력이라고 생각한다. 그러나, 나는 그것을 고치는 방법을 모르겠다. 어떤 도움이라도 대단히 감사하겠습니다!

<table class="table"> 
    <thead> 
     <tr> 
     <td >Item Code</td>    
     <td >Description</td> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td class=""><input class="itemCode"></td>    
     <td class=""><input class="itemDescription"></td> 
    </tr> 

    <tr> 
     <td class=""><input class="itemCode"></td>    
     <td class=""><input class="itemDescription"></td> 
    </tr> 
    </tbody> 
</table> 


<script> 
    $(function() { 
    $(".itemCode").autocomplete({ 
     source: function(request, response) { 
     $.ajax({ 
      url: "item-search.php", 
      dataType: "json", 
      data: { 
      term: request.term 
      }, 
      success: function(data) { 
      response(data); 
      } 
     }); 
     }, 
     minLength: 1, 
     select: function(event, ui) { 
      $(".itemDescription").val(ui.item.label); 
     } 
    }); 
    }); 
    </script> 

Answer 1

주어진 컨텍스트를 사용하여 올바른 입력을 참조하십시오. 당신은 당신이 추가 할 수있는 모든 필드에 대해 작업하려면

$(this).parent().next().children(".itemDescription").val(ui.item.label); 

는 다음을 사용 :

난 그냥 $ '로 변경

$(this).parent().siblings().children(".itemDescription").val(ui.item.label); 

Answer 2

검색된 클래스의 첫 번째 인스턴스에 결과를 제시하면됩니다.

$(".itemDescription").val(ui.item.label); 

은 해당 클래스의 모든 요소를 ​​해당 값으로 설정합니다. 첫 번째 설정 만하려는 경우

$(".itemDescription").first().val(ui.item.label);