自动完成功能无法正常工作

Question

我的自动完成功能有问题。当我使用第一个输入文本将用于自动完成，但是当我使用添加功能，我创建附加相同的元素，如第一个它不起作用。

这里是我的代码：

<script> 
       $(document).ready(function(){ 
      $("#addCF").click(function(){ 
$("#customFields").append('<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td><input type="text" class="med" name="customFieldName[]" value="" placeholder="รายชื่อยา" />&nbsp; <input type="text" class="code" name="customFieldValue[]" value="" placeholder="Input Value" /> &nbsp; <a href="javascript:void(0);" id="remCF">Remove</a></td></tr>'); 
       }); 

$("#customFields").on('click', '#remCF', function(){ 
$(this).parent().parent().remove(); 
        }  ); 

        }); 

        </script> 

        <script>//auto complete Code 
$(function() { 
$('.med').autocomplete({ 
source: "show.php",minLength: 2, 
select:function(event, ui) { 
$('#name').val(ui.item.name); 
} 
}); 

}); 
</script> 


<table class="form-table" id="customFields"> 
      <div id="name" ></div> 
    <tr valign="top"> 
     <th scope="row"><label for="customFieldName">Custom Field</label></th> 
     <td> 
      <input type="text" class="med" name="customFieldName[]" value="" placeholder="รายชื่อยา" /> &nbsp; 
      <input type="text" class="code" name="customFieldValue[]" value="" placeholder="จำนวน" /> &nbsp; 

      <a href="javascript:void(0);" id="addCF">ADD</a> 
     </td> 
    </tr> 
</table> 

http://jsfiddle.net/earc4436/3/

Answer 1

发生这种情况，因为你是在你的Javascript使用ID，当你添加它们复制了第二场。您需要使用课程或更改表单中每个字段的ID。

<input type="text" class="code" id="customFieldValue" name="customFieldValue[]" 
value="" placeholder="จำนวน" />