自動完成功能無法正常工作

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="จำนวน" />