PHP-带有动态输入字段的Jquery自动完成？

Question

如果只有一个输入字段，自动完成功能就可以正常工作。但就我而言，我必须生成输入字段。所以无论如何这是我的代码。

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>

我已经在互联网上搜索并找到了解决此类问题的解决方案，但问题是我不知道如何在我的脚本中实现它，因为它完全不同。我害怕我必须更改所有代码并影响其他脚本。所以上面的代码是针对html中的输入字段，添加字段和自动完成的脚本。 顺便说一句，我是编程新手。

Answer 1

在您的自动完成输入中添加类

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

如果您有多个具有相同类的自动完成输入，则更改您的自动完成输入 js

从使用类或 id 的直接元素调用更改为父子相对关系。 请参见下面更改的示例。根据您的要求更改。

    $(document).ready(function() {
    $(document).on('keyup', ".sug_input",function (e) {
             var formData = {
                 'product_name' : $(this).val()
             };
             $parent_container = $(this).closest('.clonedInput');
             $that = $(this);

             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);
                       $parent_container.find('#result').html(data).fadeIn();
                       $parent_container.find('#result li').click(function() {

                         $that.val($(this).text());
                         $parent_container.find('#result').fadeOut(500);

                       });

                       $that.blur(function(){
                         $parent_container.find("#result").fadeOut(500);
                       });

                   });

             } else {

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

             };

             e.preventDefault();
         });

    });