JQuery Autocomplete/ASP.NET Webhandler 包含另一个文本框的值

Question

所以我已经有一段时间（超过一周）搜索 google 和 stackoverflow 以及所有这些。似乎无法收集信息来完成这项工作。

[ASPX 页面]

    <span>Make</span> <asp:TextBox ID="Make_SearchBox" runat="server" ToolTip="Enter Make"></asp:TextBox>
    <span>Model</span> <asp:TextBox ID="Model_SearchBox" runat="server" ToolTip="Enter Model"></asp:TextBox>

[JavaScript]

    <%--Autocomplete Function--%>
<script type="text/javascript">
    var value = "";
    $(document).ready(function () {
        $("#PageContent_Make_SearchBox").autocomplete("/WebHandlers/AutoComplete.ashx",{
            extraParams: { field: "Make" },
            autoFill: false
        });

        $("#PageContent_Model_SearchBox").autocomplete("/WebHandlers/AutoComplete.ashx", {
            extraParams: { field: "Model" },
            autoFill: false
        });
    });
  </script>

[ASHX WEBHANDLER - C#]

    public void ProcessRequest(HttpContext context)
    {
        // INITIALIZING NEEDED VARS
        string query = "";
        string sql = "";

        // CHECK "field" QUERY AND PASS TO SWITCH
        string field = context.Request.QueryString["field"];
        if (field != null)
        {
            switch (field)
            {
                case "Make":
                    query = context.Request.QueryString["q"];
                    sql = "Select DISTINCT Make from Vehicle Where Make LIKE '%" + query + "%'";
                    break;

                case "Model":
                    query = context.Request.QueryString["q"];
                    sql = "Select DISTINCT Model from Vehicle Where Model LIKE '%" + query + "%' AND Make LIKE (((MAKE TEXTBOX VALUE)));
                    break;
            }
        }

        string connStr = System.Configuration.ConfigurationManager.ConnectionStrings["ConnString"].ConnectionString;
        // CONNECT TO DATABASE, RUN QUERY AND RETURN DATA
        using (SqlConnection connection = new SqlConnection(connStr))
        using (SqlCommand command = new SqlCommand(sql, connection))
        {
            connection.Open();
            using (SqlDataReader reader = command.ExecuteReader())
            {
                while (reader.Read())
                {
                    context.Response.Write(reader.GetString(0) + Environment.NewLine);
                }
            }
        }
    }

以上内容与 ma​​ke 文本字段配合使用非常好。当我在 ma​​ke 字段中输入“玩具”时，它会像这样传递：

GET http://localhost:26724/WebHandlers/AutoComplete.ashx?q=toy&field=Make

我想要做的是在用户获得 ma​​ke 并开始在 model 字段中写入它应该只搜索与该品牌有关的模型。我想 C# 方面很简单，只是 SQL 查询，但是如何让 JQuery 获取 ma​​ke 文本字段的值并将其添加到查询字符串中。 请注意，它需要在 ma​​ke 文本框已满后才获取其值，而不是在 $document.ready。

提前谢谢大家。我一定会选择一个最佳答案。

Answer 1

自动完成小部件有一个select event，当用户选择一个项目时会触发它。您可以使用它来根据用户在第一个中选择的内容过滤第二个自动完成源。

这是一个简单的例子：http://jsfiddle.net/B5fWc/8/ ...

$("#tags").autocomplete({
        source: availableTags, 
        select: function(event, ui) {
            $("#books").autocomplete({
                source: filter(availableBooks, ui.item.value)
            });
        }
    });

您使用的是旧版本的自动完成功能吗？我认为当前版本中不存在 extraParams 。

我并没有完全按照您获得q=toy 部分的方式进行操作，但我认为这样的方法可以满足您的需求。

$("#PageContent_Make_SearchBox").autocomplete({
    source: "/WebHandlers/AutoComplete.ashx?field=Make",
    select: function(event, ui) {
        $("#PageContent_Model_SearchBox").autocomplete({
            source: "/WebHandlers/AutoComplete.ashx?field=Model&Make=" + ui.item.value
        });
    }
});

然后在 C# 方面，您需要从“Make”查询字符串参数中获取他们为 Make 选择的值。