我正在使用 Jquery UI 自动完成,它工作得很好,但我正在尝试解决这个问题,并且希望得到一些帮助。自动完成功能位于 asp 面板内的文本框中,按 Enter 键的表单上的默认行为是提交表单。如果用户在“自动完成”文本框中键入内容并按 Enter 键,我希望自动完成 Web 服务启动并按 Enter 键返回结果。我在网上阅读我应该处理自动完成的按键事件,我一直在尝试但不确定如何调用自动完成来在按键上触发,我在下面显示我的代码,如果有人知道如何做到这一点请通过代码中的示例进行说明,因为我在按键上调用函数的正确语法有问题,感谢您的帮助,这是代码。
//Attach autocomplete to txtCity so user can lookup SPLCS by cities
var city;
var txtCity = $("[id$=txtAutoCity]")
$(txtCity).autocomplete({
source: function (request, response) {
request.term = request.term.replace(/[^a-zA-Z\s]+/, "")
$.ajax({
url: "../../Services.asmx/GetOfficesByCity",
data: "{ 'city': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
if (data.d != undefined) {
return {
value: item.Display,
result: item.CommaDelimited
}
}
else {
return true;
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
},
autoFill: false,
minLength: 2,
delay: 800,
mustMatch: false,
selecFirst: false,
select: function (event, ui) {
var selectedObj = ui.item;
if (ui.item) {
city = ui.item.result.split(',')[0];
$("[id$=txtCity]").val(ui.item.result.split(',')[0]);
$("[id$=txtOffice]").val(ui.item.result.split(',')[1]);
$("[id$=txtDistrict]").val(ui.item.result.split(',')[2]);
}
},
// Any action to be performed once the auto complete list closes
close: function (event) {
}
}).keypress(function (e) {
if (e.keyCode === 13) {
//How to cancel default submit behaviour of form and call this
//autocomplete function to fire??
e.preventDefault();
//my_search_function($(txtCity).val())
}
});
最佳答案
要解决此问题,您可以在自动完成中添加一个搜索属性和一个新变量,按照以下步骤操作:
- 创建一个新变量(var canPass = false);
- 在自动完成中添加搜索属性;
- 在按键事件中触发搜索功能;
所以,结果是:
//将自动完成附加到txtCity,以便用户可以按城市查找SPLCS
var canPass = false;
var city;
var txtCity = $("[id$=txtAutoCity]")
$(txtCity).autocomplete({
source: function (request, response) {
request.term = request.term.replace(/[^a-zA-Z\s]+/, "")
$.ajax({
url: "../../Services.asmx/GetOfficesByCity",
data: "{ 'city': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
if (data.d != undefined) {
return {
value: item.Display,
result: item.CommaDelimited
}
}
else {
return true;
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
},
autoFill: false,
minLength: 2,
delay: 800,
mustMatch: false,
selecFirst: false,
select: function (event, ui) {
var selectedObj = ui.item;
if (ui.item) {
city = ui.item.result.split(',')[0];
$("[id$=txtCity]").val(ui.item.result.split(',')[0]);
$("[id$=txtOffice]").val(ui.item.result.split(',')[1]);
$("[id$=txtDistrict]").val(ui.item.result.split(',')[2]);
}
},
// Any action to be performed once the auto complete list closes
close: function (event) {
},
search: function (value, event) {
if (!canPass) {
event.preventDefault();
}
else {
canPass = false;
}
},
}).keypress(function (e) {
if (e.keyCode === 13) {
canPass = true;
$(txtCity).autocomplete("search", ($txtCity).val());
}
});
因此,使用此代码,当您按 ENTER 时,自动完成功能就会开始搜索。
关于Jquery 自动完成在 Enter 按键时触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10731547/