Javascript 自动完成功能在 ascx 中不起作用

Posted 2023-02-22

【中文标题】Javascript 自动完成功能在 ascx 中不起作用

【英文标题】：Javascript autocomplete not working in ascx

【发布时间】：2019-12-27 21:31:23

【问题描述】：

我在 ascx 文件的网格视图中有自动完成功能，但自动完成功能在 ascx 文件中不起作用。我在其他有效的页面中做了几个类似的自动完成。为什么自动完成在我的 ascx 文件中不起作用。我有一个假设为什么它不起作用，但我不确定如何在这里解决它是

我认为问题出在 javascript 中的以下 url

      url: "contratoGerencia.aspx/getSupplierAndComponente"

但是我不知道我应该如何更改它，不要让它与 ascx 文件一起使用。我在这里找到了一个解决方案 https://www.codeproject.com/Questions/757769/How-to-Call-Ascx-page-form-JavaScript-Funnction-Of 这几乎是我想要的唯一问题是我的情况下也有一个文本框. 任何帮助将不胜感激。希望以下信息对您有所帮助。

这是我的 ascx (ComponentesControler.ascx) 代码

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link href="../css/autocomplete.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../scripts/autocomplete.js" ></script>
    <asp:TextBox CssClass="gridContractAndComponente" ID="txtContractComponenteFooter" Text="" runat="server" TextMode="MultiLine" Rows="1" />

这是我的 ascx.cs (ComponentesControler.ascx.cs) 代码

   [WebMethod]
        public static List<string> getSupplierAndComponente(string prefixText)
        
            string lv_numero_contrato;
            List<string> numeros_contrato = new List<string>();
            connectionStringBuilder builder = new connectionStringBuilder();
            String connString;
            connString = builder.builder.ConnectionString;

            string selectStatement = " SELECT numero_contrato FROM erp_contratos ";


            using (mysqlConnection conn = new MySql.Data.MySqlClient.MySqlConnection(connString))
            
                conn.Open();
                using (MySqlCommand cmd = conn.CreateCommand())
                
                    cmd.CommandText = selectStatement;
                    cmd.Parameters.AddWithValue("@searchText", prefixText);
                    using (MySqlDataReader reader = cmd.ExecuteReader())
                    
                        while (reader.Read())
                        
                            lv_numero_contrato = reader.GetString(reader.GetOrdinal("numero_contrato"));
                            numeros_contrato.Add(lv_numero_contrato);
                        
                    
                    conn.Close();
                
            
            return numeros_contrato;
        

这是我使用 ascx 文件时的 aspx 页面 (contratoGerencia.aspx)

  <div id="ComponentesSection" class="menusection">         
        <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Always" >
      <ContentTemplate>                   
    <TWebControl5:WebControl5 ID="Header8" runat="server" />                   
    </ContentTemplate>  
   </asp:UpdatePanel>
  </div>

这是我的 javascript 文件 (autocomplete.js)

$(document).ready(function () 
    SearchSupplierAndComponente();
);
function SearchSupplierAndComponente() 
    $(".gridContractAndComponente").autocomplete(
        source: function (request, response) 
            $.ajax(
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "contratoGerencia.aspx/getSupplierAndComponente",
                data: "'containedText':'" + document.getElementById('PageContent_gvPrimaryGrid_txtContractComponenteFooter').value + "'",
                dataType: "json",
                success: function (data) 
                    response(data.d);
                ,
                error: function (result) 
                    alert("Error");
                
            );
        
    );

【问题讨论】：

那么您在控制台中是否收到任何 JS 错误？当您在 WebMethod 中执行断点时，该断点是否被编译器命中？

当我在 WebMethod 中添加断点时，它永远不会在 WebMethod 中停止。是的，我在控制台中收到以下 JS 错误 autocomplete is not a function。

我认为你的问题是更新面板，请试试这个：***.com/questions/256195/…

@JuniorCortenbach 控制台错误意味着 JS 代码的某些部分未正确加载。尝试将您在 ComponentesControler.ascx 上的脚本标签移动到您的主页。

@JuniorCortenbach 当然，它可能会使您的设置更容易

【参考方案1】：

问题在于您在 AJAX 中输入的参数名称，您的方法需要接收名为 prefixText 而不是 containedText 的参数。

改变

data: 'containedText':'" + document.getElementById('PageContent_gvPrimaryGrid_txtContractComponenteFooter').value + "'

与

data: 'prefixText':'" + document.getElementById('PageContent_gvPrimaryGrid_txtContractComponenteFooter').value + "'

【讨论】：

是的，我已经注意到了，但是即使我更改了名为 prefixText 而不是 containsText 的参数，自动完成仍然无法正常工作

我知道，根据我的验证，您以正确的顺序引用了脚本，但可能是调用您的 ascx 甚至 MasterPage 的页面可能会重复调用某些脚本。确保您使用的 jquery 脚本没有被多次调用和加载，这可能会导致一些冲突。

你说得对，我在不同的页面上调用了 javascript，我会尝试删除它们并确保我不会重复使用它们。谢谢你的建议。

是的，你是对的，不同的页面反复调用某个脚本导致了问题。谢谢谢谢

【参考方案2】：

该问题可以由 UpdatePanel 触发，如下所述： jQuery $(document).ready and UpdatePanels?

所以像这样修改你的 autocomplete.js：

$(document).ready(function() 
    SearchSupplierAndComponente();
);

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() 
    SearchSupplierAndComponente();
);



function SearchSupplierAndComponente() 
    $(".gridContractAndComponente").autocomplete(
        source: function (request, response) 
            $.ajax(
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "contratoGerencia.aspx/getSupplierAndComponente",
                data: "'containedText':'" + document.getElementById('PageContent_gvPrimaryGrid_txtContractComponenteFooter').value + "'",
                dataType: "json",
                success: function (data) 
                    response(data.d);
                ,
                error: function (result) 
                    alert("Error");
                
            );
        
    );

查看控制台错误是否消失。