Skip to content Skip to sidebar Skip to footer

Php- Jquery Autocomplete With Dynamic Input Field?

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

Solution 1:

Add class in your autocomplete input

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

    });

Post a Comment for "Php- Jquery Autocomplete With Dynamic Input Field?"