Question

我有一个ASP.NET 4.5 WebForm应用程序，我想在TextBox中添加自动完成功能。我正在研究jquery-ui，但我似乎无法使其发挥作用。

我正在使用jquery 3.1.1和jquery-ui 1.12.1。这是我的aspx页面的主要部分。

ASPX

<head runat="server">    
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>  

    <script type="text/javascript">
        $(document).ready(function () {
            $("#SearchDynamicTxt").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "UserReports.aspx/GetUsers",
                        data: "{'term':'" + $("#SearchDynamicTxt").val() + "'}",
                        dataType: "json",
                        success: function (data) {
                            response(data.d);
                        },
                        error: function (result) {
                            alert("Error");
                        }
                    });
                }
            });
        });
    </script>
</head>

这是文本控件：

<asp:TextBox ID="SearchDynamicTxt" runat="server" OnTextChanged="SearchDynamicTxt_TextChanged" AutoPostBack="true" ></asp:TextBox>

这是背后的代码：

[WebMethod]
        public static string[] GetUsers(string term)
        {
            List<string> usersList= new List<string>();
            string CS= ConfigurationManager.ConnectionStrings["UsersCS"].ConnectionString;
            using (SqlConnection con = new SqlConnection(CS))
            {
                con.Open();
                SqlCommand cmd = new SqlCommand("SELECT Name FROM Customers WHERE Name Like '" + term + "%'", con);
                SqlDataReader reader = cmd.ExecuteReader();
                while(reader.Read())
                {
                    usersList.Add(reader[0].ToString());
                }
            }
            return usersList.ToArray();
        }

我确信有些东西我忘了或拼错了，但我不知道在哪里或哪里。当我尝试在控件中写一些东西时，没有任何反应。我想向我展示一个可能的匹配用户列表，当我选择其中一个时，调用方法OnTextChanged。

更新！

现在显示下拉列表，我想选择一个用户和那个选择来触发OnChanged方法。目前这种情况并没有发生。我需要按Enter键或单击页面上的某个位置以生成回发，然后它会检测OnChanged文本。我猜我需要改变这个：

success: function (data) 
{
     response(data.d);
},

也许添加一个事件参数或什么？我目前正在寻找解决方案，但如果有人知道答案，直到找到它，请分享。

谢谢！

Answer 1

data: "{'term':'" + $("#SearchDynamicTxt").val() + "'}",

这是问题，因为jquery没有直接找到asp.net元素，所以你需要应用以下

$('#<%=SearchDynamicTxt.ClientID %>').val()

其工作

Answer 2

我是如何努力解决问题2天而失败的，但是在发布了stackoverflow之后我会在5分钟内找到答案:)）

问题是我试图用$（＆＃34;＃SearchDynamicTxt＆＃34;）访问文本框，但文本框在LoginView中。

所以我改为：

$("#<%=LoginView1.FindControl("SearchDynamicTxt").ClientID %>")

现在它完美无缺！

也找到了UPDATE 2的答案。事实证明我需要在自动完成（而不是ajax）中写下以下内容：

select: function (event, ui) 
{
     $("#<%=LoginView1.FindControl("SearchDynamicTxt").ClientID %>").trigger("change");
}

希望这能帮助像我一样陷入困境的其他人。

Answer 3

试试这个：

interface

ASP.NET JQuery-UI自动完成无法正常工作

3 个答案: