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.

For a start you cant have multiple duplicate ids (sug_input) on the page, jquery will select the first, then you should abstract out the event handler function for your autocomplete, so on adding a new item/row you can attach the event to it. — Lawrence Cherone
– Lawrence Cherone, Commented Apr 18, 2018 at 3:23

Nirali · Accepted Answer · 2018-04-18 05:21:50Z

5

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

    });

edited Apr 18, 2018 at 5:21

answered Apr 18, 2018 at 4:01

Nirali

1,7863 gold badges14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Niko surya pratama Over a year ago

Hi Nirali. i have test your change but it still work for the first field input. when it come to the second one it's not working. any other suggestion? thank you

Nirali Over a year ago

Then you have to debug printing values

Nirali Over a year ago

Can you provide fiddle of your code using dummy content instead of ajax?

Niko surya pratama Over a year ago

how can i do that?

Niko surya pratama Over a year ago

i dont know how to use fiddle. i can upload the file if you want me to.

|

Collectives™ on Stack Overflow

PHP- Jquery Autocomplete with dynamic input field?

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related