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);
                }
            }
        }
    }

上面的代码在make文本字段中绝对可以正常工作。 当我在make字段中键入“ toy”时，它像这样通过：

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

我想做的是在用户获得品牌并开始在“ 模型”字段中编写之后，它应该仅搜索与该品牌相关的模型。 我想C＃方面很容易，只是SQL查询，但是我如何获取JQuery以获取make文本字段的值并将其添加到查询字符串中。 请注意，它仅在填满后才需要获取make文本框的值，而不是在$ document.ready处。

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

Answer 1

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

这是一个简单的示例： 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选择的值。