如何使用 AJAX 自动完成触发 JQuery
How to Trigger JQuery with AJAX Autocomplete
我在这里看到了一些类似的帖子,但不幸的是 none 已经解决了我的问题。我在 JQuery 方面的经验很少,所以我确信我遗漏了一些东西。如果有人能帮我解决这个问题,我将不胜感激!
我创建了一个 ASP.NET/C# 页面,该页面使用 JQuery/AJAX 自动完成功能来显示用户可以 select 来自的标签或批号列表他们在文本框 (txtLookup) 中键入值。
$(document).ready(function ()
{
$("#txtLookup").on("keyup",function () {
var textCheck = $("#txtLookup").val();
if ($("#txtLookupType").val() == "tagNo")
{
$(".autosuggest").autocomplete(
{
source: function (request, response) {
$.ajax(
{
type: "POST",
url: "Inventory.aspx/GetAutoCompleteData",
data: '{"lookup":' + textCheck + '}',
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data) { response(data.d); },
});
}
, minLength: 2,
});
}
else if ($("#txtLookupType").val() == "lotNo")
{
var jsonText = JSON.stringify({ lookup: textCheck + '%' });
$(".autosuggest").autocomplete(
{
source: function (request, response) {
$.ajax(
{
type: "POST",
url: "Inventory.aspx/GetAutoCompleteData3",
data: jsonText,
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data) { response(data.d); },
//error: function (ts) { alert(ts.responseText); }
});
}
, minLength: 2,
});
}
else
{
}
});
});
当使用键盘输入值时,该功能效果很好,但用户也可以通过我创建的屏幕数字键盘输入数字(该程序在触摸屏上运行)。当用户点击一个数字按钮时,数字会通过 Javascript 写入文本框。我想在这个时候触发自动完成,但我不知道该怎么做。我尝试过的一些事情在下面的代码块中有评论。我还尝试修改函数以使用 $("[id$=txtLookup").keyup(function () {
而不是 $("#txtLookup").on("keyup",function () {
。我尝试过不同的事件,例如 keydown、keypress 和 change,但都没有成功。
此 Javascript 块在用户单击“1”按钮时运行:
if (object.id == "imgNum1")
{
var x;
x = "1";
var textObj = document.getElementById('txtLookup');
insertTextAtCursor(textObj, x);
document.getElementById("txtLookup").focus();
document.getElementById("txtLastClickedBtnValue").value = '';
//Failed attempts...
//$("#txtLookup").trigger("keyup");
//jQuery(document).ready(function(){});
//$(".autosuggest").autocomplete("search");
//$("input#txtLookup").autocomplete("search");
//$("[id$=txtLookup]").autocomplete("search");
}
有人可以告诉我我做错了什么吗?提前致谢!
编辑以添加 ASP.NET 代码:
文本框:
<asp:TextBox id="txtLookup" runat="server" Height="16px" Width="155px" CSSClass="labelAlignTop autosuggest" onfocus="javascript: setTextboxID(this);"></asp:TextBox>
setTetboxID 函数只是将文本框名称写入隐藏字段以存储它以跟踪最后单击的文本框。
数字按钮:
<asp:ImageButton ID="imgNum1" ImageUrl="Images/InvNumPad/btn_1.png" runat="server" onmouseover="this.src='Images/InvNumPad/btn_1_Over.png'" onmouseout="this.src='Images/InvNumPad/btn_1.png'" CssClass="inv_btnNum1" onfocus="javascript: getButtonClicked(this)" onclientclick="return false;" Width="50px" Height="50px"/>
getButtonClicked 函数包含我在上面发布的 Javascript 块,该块在用户单击“1”按钮并处理插入符号定位时运行。
经过许多繁琐的工作,神圣的干预使我解决了我的问题。我想添加一个更新,以防将来有人抓狂寻找答案。要触发我在上面发布的自动完成代码,我需要触发两个事件:touchstart 和 input。
function triggerAC()
{
//Triggers txtLookup autocomplete after touchscreen event
$("#txtLookup").trigger("touchstart");
$("#txtLookup").trigger("input");
}
我还在原来贴的代码块的第三行添加了touchstart,改动
$("#txtLookup").on("keyup",function () {
至
$("#txtLookup").on("keyup touchstart",function () {
我在这里看到了一些类似的帖子,但不幸的是 none 已经解决了我的问题。我在 JQuery 方面的经验很少,所以我确信我遗漏了一些东西。如果有人能帮我解决这个问题,我将不胜感激!
我创建了一个 ASP.NET/C# 页面,该页面使用 JQuery/AJAX 自动完成功能来显示用户可以 select 来自的标签或批号列表他们在文本框 (txtLookup) 中键入值。
$(document).ready(function ()
{
$("#txtLookup").on("keyup",function () {
var textCheck = $("#txtLookup").val();
if ($("#txtLookupType").val() == "tagNo")
{
$(".autosuggest").autocomplete(
{
source: function (request, response) {
$.ajax(
{
type: "POST",
url: "Inventory.aspx/GetAutoCompleteData",
data: '{"lookup":' + textCheck + '}',
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data) { response(data.d); },
});
}
, minLength: 2,
});
}
else if ($("#txtLookupType").val() == "lotNo")
{
var jsonText = JSON.stringify({ lookup: textCheck + '%' });
$(".autosuggest").autocomplete(
{
source: function (request, response) {
$.ajax(
{
type: "POST",
url: "Inventory.aspx/GetAutoCompleteData3",
data: jsonText,
contentType: "application/json;charset=utf-8",
dataType: "json",
success: function (data) { response(data.d); },
//error: function (ts) { alert(ts.responseText); }
});
}
, minLength: 2,
});
}
else
{
}
});
});
当使用键盘输入值时,该功能效果很好,但用户也可以通过我创建的屏幕数字键盘输入数字(该程序在触摸屏上运行)。当用户点击一个数字按钮时,数字会通过 Javascript 写入文本框。我想在这个时候触发自动完成,但我不知道该怎么做。我尝试过的一些事情在下面的代码块中有评论。我还尝试修改函数以使用 $("[id$=txtLookup").keyup(function () {
而不是 $("#txtLookup").on("keyup",function () {
。我尝试过不同的事件,例如 keydown、keypress 和 change,但都没有成功。
此 Javascript 块在用户单击“1”按钮时运行:
if (object.id == "imgNum1")
{
var x;
x = "1";
var textObj = document.getElementById('txtLookup');
insertTextAtCursor(textObj, x);
document.getElementById("txtLookup").focus();
document.getElementById("txtLastClickedBtnValue").value = '';
//Failed attempts...
//$("#txtLookup").trigger("keyup");
//jQuery(document).ready(function(){});
//$(".autosuggest").autocomplete("search");
//$("input#txtLookup").autocomplete("search");
//$("[id$=txtLookup]").autocomplete("search");
}
有人可以告诉我我做错了什么吗?提前致谢!
编辑以添加 ASP.NET 代码:
文本框:
<asp:TextBox id="txtLookup" runat="server" Height="16px" Width="155px" CSSClass="labelAlignTop autosuggest" onfocus="javascript: setTextboxID(this);"></asp:TextBox>
setTetboxID 函数只是将文本框名称写入隐藏字段以存储它以跟踪最后单击的文本框。
数字按钮:
<asp:ImageButton ID="imgNum1" ImageUrl="Images/InvNumPad/btn_1.png" runat="server" onmouseover="this.src='Images/InvNumPad/btn_1_Over.png'" onmouseout="this.src='Images/InvNumPad/btn_1.png'" CssClass="inv_btnNum1" onfocus="javascript: getButtonClicked(this)" onclientclick="return false;" Width="50px" Height="50px"/>
getButtonClicked 函数包含我在上面发布的 Javascript 块,该块在用户单击“1”按钮并处理插入符号定位时运行。
经过许多繁琐的工作,神圣的干预使我解决了我的问题。我想添加一个更新,以防将来有人抓狂寻找答案。要触发我在上面发布的自动完成代码,我需要触发两个事件:touchstart 和 input。
function triggerAC()
{
//Triggers txtLookup autocomplete after touchscreen event
$("#txtLookup").trigger("touchstart");
$("#txtLookup").trigger("input");
}
我还在原来贴的代码块的第三行添加了touchstart,改动
$("#txtLookup").on("keyup",function () {
至
$("#txtLookup").on("keyup touchstart",function () {