gpt4 book ai didi

javascript - JQuery UI 自动完成 AJAX 调用

转载 作者:行者123 更新时间:2023-12-02 14:06:29 25 4
gpt4 key购买 nike

我正在尝试创建一个搜索字段,该字段可以使用 ajax 调用自动完成数据库中的建议。选择一个项目后,我希望它更新搜索字段。目前,当我在此文本框中输入内容时,它会返回一个空选择。任何帮助,将不胜感激。

这是代码,已根据建议的更改进行了更新,但现在我得到的是空列表。

function autoCompleteCheckRun() {
$('#autocompleteCR')
.autocomplete({
minLength: 0,
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: './PayInvoicesWS.asmx/GetCheckRun',
data: "{'description':'" + document.getElementById('autocompleteCR').value + "'}",
dataType: "json",
success: function (data) {
var rows = autocompleteJSONParseCode(data);
response(rows);
},
error: function (result) {
alert("Error");
},
select: function (event, ui) {
var checkRunData = $("#CheckRunDescription");
var checkRunID = $("#CheckRunID");
checkRunData.val(ui.item.label);
checkRunID.val(ui.item.value);


}
});
}
});
}

function autocompleteJSONParseCode(data) {
var rows = new Array();
var rowData = null;
for (var i = 0, dataLength = data.d.length; i < dataLength; i++) {
rowData = data.d[i];
// alert(rowData.term2+":"+rowData.term1);//uncomment to see data as it parses
rows[i] = {
value: rowData.CheckRunID,
label: rowData.Description
};
}

return rows;
}

div class="ui-widget">
<label for="autocompleteCR" id="checkRunLabel">Check Run Lookup:</label>
<input type="text" id="autocompleteCR" />
</div>

example

最佳答案

您放错了select功能。将其从 source 函数中移出,并与 source 函数平行放置。

$('#autocompleteCR')
.autocomplete({
minLength: 0,
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: './PayInvoicesWS.asmx/GetCheckRun',
data: "{'description':'" + document.getElementById('autocompleteCR').value + "'}",
dataType: "json",
success: function (data) {
var rows = autocompleteJSONParseCode(data);
response(rows);
},
error: function (result) {
alert("Error");
}
});
},
select: function (event, ui) {
var checkRunData = $("#CheckRunDescription");
var checkRunID = $("#CheckRunID");
checkRunData.val(ui.item.label);
checkRunID.val(ui.item.value);


}
});

我为您正在寻找的内容制作了一个工作示例:

https://jsfiddle.net/gschambial/d0g3dLvu/19/

$( "#tags" ).autocomplete({
source: availableTags,
select: function(event, ui) {
alert('Label is :' + ui.item.label + ' and Value is : ' +ui.item.value);
}
});

改变

function(el) {
return {
CheckRunID: el.CheckRunID,
Description: el.Description
};
}));

function(el) {
return {
value: el.CheckRunID,
label: el.Description
};
}));

而不是

checkRunData.val(ui.item.CheckRunID + ui.item.Description);

使用

checkRunData.val(ui.item.label + ui.item.value);

关于javascript - JQuery UI 自动完成 AJAX 调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40026708/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com