jQuery通過具有相同類名的多個字段一鍵自動完成

Question

我正在使用jquery.autocomplete通過代碼搜索項目並自動完成代碼，還更新了先前的表單輸入字段，名稱為：

<tr>
<td><input type="text" name="Name[]" class="nameautoc" value="badname1" /></td>
<td><input type="text" name="Code[]" class="codeautoc" value="1234" /></td>
</tr>
<tr>
<td><input type="text" name="Name[]" class="nameautoc" value="ok_name" /></td>
<td><input type="text" name="Code[]" class="codeautoc" value="12345" /></td>
</tr>
<tr>
<td><input type="text" name="Name[]" class="nameautoc" value="badname2" /></td>
<td><input type="text" name="Code[]" class="codeautoc" value="34567" /></td>
</tr>

對於每個“代碼”輸入字段，代碼本身的自動完成功能都可以正常工作。 添加JS代碼以更新匹配的“名稱”字段時，它將更新整個表單“名稱”字段，而不是我正在使用的上一個/或當前表單。

如何實現選擇的代碼僅自動完成當前輸入的“名稱”字段，還是應該使用JS代碼引用正在使用的表？

JS代碼：

    $(document).ready(function($) { 
        $(".codeautoc").autocomplete({
            source:"codenName.php",
            minLength:2,
            select:function(event,ui){
                var item=ui.item;
                if(item){
                    $(".nameautoc").val(item.name);
                }
            }
    });

相關的PHP代碼：

    while($row = mysql_fetch_array($fetch,MYSQL_ASSOC)) {
        $return_row['label'] = $row['code'];
        $return_row['value'] = $row['code'];
        $return_row['name'] = $row['name'];
        array_push($return_arr, $return_row);
    }

希望我提供了必要的信息。

謝謝！

Answer 1

您的select回調應如下所示：

  select:function(event,ui){
      var item=ui.item;
      if(item){
         $(".nameautoc", $(this).parents('tr')).val(item.name);
      }
  }

通過在jQuery選擇器中添加$(this).parents('tr')作為上下文（有關更多詳細信息，請參考JQuery文檔 ），您可以確保僅更新父tr元素的匹配子元素，而不是更新文檔中所有具有nameautoc類的元素。

（可選）您也可以使用$(this).parent().parent()遍歷tr ，而不是使用$(this).parents('tr') 。 這是工作中的小提琴。