Jquery按enter键自动完成点火
我正在使用jQueryUIAutoComplete,它工作得很好,但我正在努力解决这个问题,希望能得到一些帮助。“自动完成”位于asp面板内的文本框中,按Enter键提交表单时的默认行为是提交表单。如果用户在Autocomplete文本框中键入内容并按Enter键,我希望AutoCompleteWeb服务启动并在Enter键上返回结果。我在网上读到我本来打算为autocomplete处理按键事件,我一直在尝试但不确定如何调用autocomplete在按键上启动,我在下面展示我的代码,如果有人知道如何做到这一点,请在代码中举例说明,因为我对在按键上调用函数的正确语法有问题,非常感谢您的帮助,下面是代码Jquery按enter键自动完成点火,jquery,asp.net,jquery-ui,jquery-plugins,Jquery,Asp.net,Jquery Ui,Jquery Plugins,我正在使用jQueryUIAutoComplete,它工作得很好,但我正在努力解决这个问题,希望能得到一些帮助。“自动完成”位于asp面板内的文本框中,按Enter键提交表单时的默认行为是提交表单。如果用户在Autocomplete文本框中键入内容并按Enter键,我希望AutoCompleteWeb服务启动并在Enter键上返回结果。我在网上读到我本来打算为autocomplete处理按键事件,我一直在尝试但不确定如何调用autocomplete在按键上启动,我在下面展示我的代码,如果有人知道
//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())
}
});
请查看已接受的答案,忽略以下内容 首先,我想告诉你你是怎么想的。自动完成的概念是让用户继续键入,直到答案完全解决为止(或者从给定选项中选择他们想要的选项,顺便说一句,可以通过箭头键进行选择,然后按ENTER键选择结果) 也就是说,如果您真的想覆盖ENTER行为,我建议您通过“keydown”单独执行,而不是作为autocomplete小部件的一部分。下面的JSFIDLE应该让您知道应该看什么: 亲切问候, toepoke.co.uk您需要在自动完成对象上启动搜索功能
($txtCity).autocomplete( "search", "TheSearchValueToSend" )
有关详细信息,请参见要解决此问题,您可以按照以下步骤在自动完成中添加搜索属性和新变量:
- 创建一个新变量(var canPass=false)李>
- 在自动完成中添加搜索属性李>
- 在按键事件中启动搜索功能李>
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键时,您的自动完成功能将开始搜索。我知道默认行为是从下拉结果中选择一个条目,但用户抱怨如果他们快速键入全名,按enter键不会发生任何事情,自动完成的结果也不会显示。这就是为什么如果用户键入内容并按enter键,至少他们可以看到与键入内容类似的自动完成结果,我想启动自动完成功能,否则什么也不会发生。抱歉,误解了您的意图。我将编辑我的帖子,以清楚地看到被接受的答案。非常感谢Leon,我能够用你的建议这样做(txtCity)。自动完成(“search”,txtCity.val())这是完美的工作。我花了很多时间来寻找一个有效的解决方案。