Javascript PHP-Jquery自动完成动态输入字段？

如果只有一个输入字段，则自动完成工作正常。但在我的例子中，我必须生成输入字段。这是我的代码

HTML部分

<div class="clonedInput" id="input1">
    <div class="row" id="items">
     <div class="col-md-4">
      <div class="form-group">
        <div class="input-group">
         <span class="input-group-btn">
         </span>
         <input type="text" id="sug_input" class="form-control" name="title"  placeholder="Search for product name">
        </div>
        <div id="result" class="list-group result"></div>
      </div>
     </div>
    </div>
</div>
<input type="button" id="btnAdd" value="add another item" />
<input type="button" id="btnDel" value="remove item" />

<script type="text/javascript">
    $('#btnAdd').click(function() {
    var num        = $('.clonedInput').length;    // how many "duplicatable" input fields we currently have
    var newNum    = new Number(num + 1);        // the numeric ID of the new input field being added

    // create the new element via clone(), and manipulate it's ID using newNum value
    var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

    // manipulate the name/id values of the input inside the new element
    newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);

    // insert the new element after the last "duplicatable" input field
    $('#input' + num).after(newElem);

    // enable the "remove" button
    $('#btnDel').prop('disabled',false);

    // business rule: you can only add 5 names
    if (newNum == 10)
        $('#btnAdd').attr('disabled','disabled');
});

$(document).ready(function() {
$('#sug_input').keyup(function(e) {
         var formData = {
             'product_name' : $('input[name=title]').val()
         };

         if(formData['product_name'].length >= 1){

           // process the form
           $.ajax({
               type        : 'POST',
               url         : 'ajax.php',
               data        : formData,
               dataType    : 'json',
               encode      : true
           })
               .done(function(data) {
                   //console.log(data);
                   $('#result').html(data).fadeIn();
                   $('#result li').click(function() {

                     $('#sug_input').val($(this).text());
                     $('#result').fadeOut(500);

                   });

                   $('#sug_input').blur(function(){
                     $("#result").fadeOut(500);
                   });

               });

         } else {

           $("#result").hide();

         };

         e.preventDefault();
     });

});

</script>

脚本部分

<div class="clonedInput" id="input1">
    <div class="row" id="items">
     <div class="col-md-4">
      <div class="form-group">
        <div class="input-group">
         <span class="input-group-btn">
         </span>
         <input type="text" id="sug_input" class="form-control" name="title"  placeholder="Search for product name">
        </div>
        <div id="result" class="list-group result"></div>
      </div>
     </div>
    </div>
</div>
<input type="button" id="btnAdd" value="add another item" />
<input type="button" id="btnDel" value="remove item" />

<script type="text/javascript">
    $('#btnAdd').click(function() {
    var num        = $('.clonedInput').length;    // how many "duplicatable" input fields we currently have
    var newNum    = new Number(num + 1);        // the numeric ID of the new input field being added

    // create the new element via clone(), and manipulate it's ID using newNum value
    var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

    // manipulate the name/id values of the input inside the new element
    newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);

    // insert the new element after the last "duplicatable" input field
    $('#input' + num).after(newElem);

    // enable the "remove" button
    $('#btnDel').prop('disabled',false);

    // business rule: you can only add 5 names
    if (newNum == 10)
        $('#btnAdd').attr('disabled','disabled');
});

$(document).ready(function() {
$('#sug_input').keyup(function(e) {
         var formData = {
             'product_name' : $('input[name=title]').val()
         };

         if(formData['product_name'].length >= 1){

           // process the form
           $.ajax({
               type        : 'POST',
               url         : 'ajax.php',
               data        : formData,
               dataType    : 'json',
               encode      : true
           })
               .done(function(data) {
                   //console.log(data);
                   $('#result').html(data).fadeIn();
                   $('#result li').click(function() {

                     $('#sug_input').val($(this).text());
                     $('#result').fadeOut(500);

                   });

                   $('#sug_input').blur(function(){
                     $("#result").fadeOut(500);
                   });

               });

         } else {

           $("#result").hide();

         };

         e.preventDefault();
     });

});

</script>

$（'#btnAdd'）。单击（函数（）{
var num=$（'.clonedInput'）.length；//当前有多少个“可复制”输入字段
var newNum=newnumber（num+1）；//正在添加的新输入字段的数字ID
//通过clone（）创建新元素，并使用newNum值操纵其ID
var newElem=$（'#input'+num）.clone（）.attr（'id'，'input'+newNum）；
//操纵新元素内输入的名称/id值
newElem.children（':first'）.attr（'id'，'name'+newNum）.attr（'name'，'name'+newNum）；
//在最后一个“可复制”输入字段后插入新元素
$（'#input'+num）.after（newElem）；
//启用“删除”按钮
$（'btnDel'）.prop（'disabled'，false）；
//业务规则：只能添加5个名称
如果（newNum==10）
$（'btnAdd'）.attr（'disabled'，'disabled'）；
});
$（文档）.ready（函数（）{
$（'sug_input'）.keyup（函数（e）{
var formData={
'product_name'：$（'input[name=title]'）。val（）
};
if（formData['product_name'].长度>=1）{
//处理表格
$.ajax({
键入：“POST”，
url:'ajax.php'，
数据：formData，
数据类型：“json”，
编码：正确
})
.完成（功能（数据）{
//控制台日志（数据）；
$（'#result'）.html（data.fadeIn（）；
$（'#result li'）。单击（函数（）{
$（'#sug_input'）.val（$（this.text（））；
$（“#结果”）。淡出（500）；
});
$（'#sug_input'）.blur（函数（）{
美元（“#结果”）。淡出（500）；
});
});
}否则{
$（“#结果”）.hide（）；
};
e、 预防默认值（）；
});
});

我在互联网上搜索并找到了解决这类问题的方法，但问题是我不知道如何在我的脚本中实现它，因为它完全不同。我担心我必须更改所有代码并影响其他脚本。因此，上面的代码是用于html中的输入字段，用于添加字段和自动完成的脚本。

---

顺便说一句，我是编程新手

在自动完成输入中添加类

<input type="text" id="sug_input" class="form-control sug_input" name="title"  placeholder="Search for product name">

---

首先，页面上不能有多个重复的ID（sug_input），jquery将选择第一个，然后您应该为自动完成提取事件处理程序函数，以便添加一个新的项/行，您可以将事件附加到它。Hi Nirali。我已经测试了您的更改，但它仍然适用于第一个字段输入。当第二个问题出现时，它就不起作用了。还有其他建议吗？谢谢当你必须调试打印值时，你可以用虚拟内容而不是ajax来提供你的代码吗？我怎么做？我不知道怎么使用fiddle。如果你愿意，我可以上传文件。