Question

我在ASP.NET c＃和MySQL数据库中工作。

我需要使用AJAX从数据库制作AutoComplete TextBox，我已经在网上试过这个教程。

Tutorial

但是当名称由多个单词组成时，我遇到了问题，例如：：

name：Plane

致力于搜索

名称：
的计划员

无法正常工作，因为后缀页后， TextBox 列表中的所选值仅为 Planner 且搜索返回为空。

如果删除 TextBox txtCp 属性

AutoPostBack="true"

并按输入以搜索正在运行的脚本。

为什么？

我的代码：

<asp:TextBox ID="txtCp" runat="server" OnTextChanged="txtCp_TextChanged" AutoPostBack="true"></asp:TextBox>
<asp:HiddenField ID="hfCp" runat="server" />

[WebMethod]
public static string[] GetCustomers(string prefix)
{
    List<string> customers = new List<string>();

    using (OdbcConnection conn =
        new OdbcConnection(ConfigurationManager.ConnectionStrings["ConnMySQL"].ConnectionString))
    {
        using (OdbcCommand cmd = new OdbcCommand())
        {
            cmd.CommandText = "SELECT Name FROM doName WHERE Name LIKE CONCAT('%',?,'%'); ";
            cmd.Parameters.AddWithValue("param1", prefix);
            cmd.Connection = conn;
            conn.Open();

            using (OdbcDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    customers.Add(string.Format("{0}", sdr["Name"].ToString().ToUpper()));
                }
            }
            conn.Close();
        }
    }
    return customers.ToArray();
}


protected void txtCp_TextChanged(object sender, EventArgs e)
{
    BindData();
}


    $(function () {
        $("[id$=txtCp]").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '<%=ResolveUrl("Default.aspx/GetCustomers") %>',
                    data: "{ 'prefix': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.split('-')[0],
                                val: item.split('-')[1]
                            }
                        }))
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            },
            select: function (e, i) {
                $("[id$=hfCp]").val(i.item.val);
            },
            minLength: 1
        });
    });

你能帮我解决一下这个问题吗？

提前致谢。

编辑＃1

第一段：

第二段：

测试代码：

protected void txtCp_TextChanged(object sender, EventArgs e)
{
    CustomerId = hfCustomerId.Value;
    Text = txtSearch.Text;
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Name: " + CustomerId + "\\nID: " + Text + "');", true);
}

Answer 1

AutoPostback为true表示当值更改或按Enter键时进行回发。如果你想使用jQuery.Ajax，你可能不应该使用回发。

Answer 2

鉴于聊天中的讨论，我在IE11中重现了IE8的问题。当移动到自动完成选择列表时，浏览器会将其解释为离开文本框并触发回发，该回发将不完整的前缀选择作为值并重新加载整个页面。

我相信对于您的场景，解决方案是使用包含页面其余部分的UpdatePanel，并在文本框中发生更改时进行更新。这样，即使它过早地触发回发，输入元素也保持不变，你可以为所选值触发另一个。

另一种解决方案是尝试使用其他自动完成解决方案，例如Select2，这可能会在所有浏览器中始终如一。

无论如何，我相信在你的场景中你永远不需要一个不完整的价值，你只需要选择一个客户或什么也不需要。在这种情况下，使用过滤器而不是带有自动完成的文本输入的选择感觉更自然，所以即使您也使用UpdatePanel也要尝试。

使用ASP.Net中的AJAX PageMethods从数据库实现jQuery AutoComplete TextBox

2 个答案: