如何使用 AJAX 自动完成触发 JQuery

Posted 2023-05-08

【中文标题】如何使用 AJAX 自动完成触发 JQuery

【英文标题】：How to Trigger JQuery with AJAX Autocomplete

【发布时间】：2021-06-16 22:40:30

【问题描述】：

我在这里看到了一些类似的帖子，但不幸的是，它们都没有解决我的问题。我对 JQuery 的经验很少，所以我确信我缺少一些东西。如果有人可以帮助我解决这个问题，我将不胜感激！

我创建了一个 ASP.NET/C# 页面，该页面使用 JQuery/AJAX 自动完成功能来显示标签或批号列表，用户在文本框中键入值时可以从中选择 (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，但没有任何运气。 ​

当用户点击“1”按钮时，这个 Javascript 块运行：

     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”按钮并处理插入符号定位时运行。

【问题讨论】：

您能否将相关的 html 添加到问题中。听起来您需要使用 trigger() 并可能使用 input 事件而不是 keyup

谢谢，是的，我添加了一些额外的代码来澄清。我没有使用 HTML，我使用的是 ASP.NET 文本框控件和图像按钮。我还尝试将其添加到单击数字按钮时调用的块中： $("txtLookup").trigger("keyup");

【参考方案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 ()