Автозаполнение не работает

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, когда вы добавляете второе поле они продублированы. Вы либо должны использовать класс, либо изменить идентификатор для каждого поля в своей форме.

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