问题
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.
回答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();
});
});
来源：https://stackoverflow.com/questions/49890591/php-jquery-autocomplete-with-dynamic-input-field