0
我有以下代碼爲多個自動完成的各個領域。所有的工作正常，但問題是，我的用戶輸入太快，Ajax沒有時間加載所有結果。因此，當有人鍵入整個單詞時（它在建議列表中，但尚未出現 - 速度太慢）時，我需要使用該單詞，以便它的行爲與點擊列表中此單詞時使用的單詞相似。自動完成 - 用戶輸入速度太快 - 選擇輸入的輸入
答案可能是這樣的 - >How do you trigger autocomplete "select" event manually in jQueryUI?，但我不知道它是如何處理填充多個領域。我需要在onchange之後再次執行mysql查詢嗎？任何人都可以幫忙嗎？我是一個初學者，所以請抱歉我不知道。我可能需要一步一步的指導。
如果我需要這個 - 我把它放在我的代碼中？
$(this).data('ui-autocomplete')._trigger('select', 'autocompleteselect', {item:{value:$(this).val()}});
我的代碼是這樣的：
$(".addmore").on('click',function(){
count=$('table tr:visible').length;
var data="<tr><td><div class='form-control rohy'><i class='fa fa-trash-o vymazat' id='"+i+"' onclick='reply_click(this.id);calculatecelkovoucenu();removeRow(this)' value='delete_"+i+"' data-val='"+i+"' style='font-size: 18px;color: #e70000;cursor: pointer;'></i><div></td><td><div class='form-control rohy'><span id='snum"+i+"'>"+count+".</span><div></td>";
data +="<td style='padding-right: 10px;'><input class='form-control rohy' type='text' id='produktyname_"+i+"' name='produktyname_"+i+"' placeholder='Kod zbozi' ></td> <td style='padding-right: 10px;'><input class='form-control rohy' type='text' id='produkty_no_"+i+"' name='produkty_no_"+i+"' placeholder='Popis zbozi' ></td><td style='padding-right: 10px;'><input class='form-control rohy' type='text' id='phone_code_"+i+"' name='phone_code_"+i+"' placeholder='Cena za 1 ks' oninput='calculate"+i+"();calculatecelkovoucenu();'></td><td style='padding-right: 10px;'><input class='form-control rohy' type='text' id='produktypocet_"+i+"' name='produktypocet_"+i+"' placeholder='Ks' oninput='calculate"+i+"();calculatecelkovoucenu();'></td><td><input class='form-control rohy' type='text' id='celkovacena_"+i+"' name='celkovacena_"+i+"' placeholder='Celkova cena' onchange='calculate"+i+"();calculatecelkovoucenu();' readonly></td></tr>";
$('table').append(data);
row = i ;
$('#produktyname_'+i).autocomplete({
source: function(request, response) {
$.ajax({
url : 'getprodukty.php',
dataType: "json",
method: 'post',
delay: 0,
data: {
name_startsWith: request.term,
type: 'produkty_table',
row_num : row
},
success: function(data) {
response($.map(data, function(item) {
var code = item.split("|");
return {
label: code[0],
value: code[0],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 3,
select: function(event, ui) {
var names = ui.item.data.split("|");
id_arr = $(this).attr('id');
id = id_arr.split("_");
$('#produkty_no_'+id[1]).val(names[1]);
$('#phone_code_'+id[1]).val(names[2]);
$('#produkty_code_'+id[1]).val(names[3]);
}
});
$('#produkty_code_'+i).autocomplete({
source: function(request, response) {
$.ajax({
url : 'getprodukty.php',
dataType: "json",
method: 'post',
delay: 0,
data: {
name_startsWith: request.term,
type: 'produkty_table',
row_num : row
},
success: function(data) {
response($.map(data, function(item) {
var code = item.split("|");
return {
label: code[3],
value: code[3],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 3,
select: function(event, ui) {
var names = ui.item.data.split("|");
id_arr = $(this).attr('id');
id = id_arr.split("_");
$('#produkty_no_'+id[1]).val(names[1]);
$('#phone_code_'+id[1]).val(names[2]);
$('#produktyname_'+id[1]).val(names[0]);
}
});
$('#phone_code_'+i).autocomplete({
source: function(request, response) {
$.ajax({
url : 'getprodukty.php',
dataType: "json",
method: 'post',
delay: 0,
data: {
name_startsWith: request.term,
type: 'produkty_table',
row_num : row
},
success: function(data) {
response($.map(data, function(item) {
var code = item.split("|");
return {
label: code[2],
value: code[2],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 3,
select: function(event, ui) {
var names = ui.item.data.split("|");
id_arr = $(this).attr('id');
id = id_arr.split("_");
$('#produkty_no_'+id[1]).val(names[1]);
$('#produkty_code_'+id[1]).val(names[3]);
$('#produktyname_'+id[1]).val(names[0]);
}
});
$('#produkty_no_'+i).autocomplete({
source: function(request, response) {
$.ajax({
url : 'getprodukty.php',
dataType: "json",
method: 'post',
delay: 0,
data: {
name_startsWith: request.term,
type: 'produkty_table',
row_num : row
},
success: function(data) {
response($.map(data, function(item) {
var code = item.split("|");
return {
label: code[1],
value: code[1],
data : item
}
}));
}
});
},
autoFocus: true,
minLength: 3,
select: function(event, ui) {
var names = ui.item.data.split("|");
id_arr = $(this).attr('id');
id = id_arr.split("_");
$('#produkty_code_'+id[1]).val(names[3]);
$('#phone_code_'+id[1]).val(names[2]);
$('#produktyname_'+id[1]).val(names[0]);
}
});
i++;
});
getprodukty.php如下：
if($_POST['type'] == 'produkty_table'){
$row_num = $_POST['row_num'];
$name = $_POST['name_startsWith'];
$query = "SELECT kod,cena,popis FROM produkty where kod LIKE '".$name."%' ORDER by kod ASC LIMIT 5";
$result = mysqli_query($spojeni, $query);
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
$name = $row['kod'].'|'.$row['popis'].'|'.$row['cena'].'|'.$row_num;
array_push($data, $name);
}
echo json_encode($data);
}
謝謝！
您可能需要存儲對先前ajax請求的引用，然後在創建新引用時將其中止。你可以嘗試去掉事件 – adeneo
你能給我一個提示，我該怎麼做？ –