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