PHP- Jquery Autocomplete with dynamic input field?

Question

The Autocomplete worked just fine IF only have one input field. but in my case i have to generate the input field. so anyway this is my code.

HTML PART

<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 PART

<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>

i have searched and find the solution in the internet to solve this kind of problem but the thing is i dont know how to implement that to my script because it quite different. i affraid that i have to change all the code and effecting the other script. so the code above is for the input field in html, the script for adding the field and autocomplete. btw i am new to programming.

Answer 1

Add class in your autocomplete input

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

If you have multiple autocomplete input with same class then change in you autocomplete input js

change from direct element call using class or id to parent child relative relations. See below changed example. Change according to your requirment.

    $(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();
         });

    });