jquery - 如何制作自动完成文本框，在提交时将值传递给另一个 aspx 页面？

Question

我有一个包含产品列表页面和产品详细信息页面的网站。

在 asp 母版页中，我放置了一个文本框来搜索数据库中的产品。

我需要做的是：当访问者开始在文本框中书写时，文本框会自动从数据库中的产品名称中完成。

当访问者在下拉列表中的结果上按 Enter 键时，站点会将他带到由来自主页的查询字符串传递的 ID 中提交的产品详细信息填充的产品详细信息页面。

请帮助我，我搜索了很多，并且有非常相似的问题对我的情况不起作用。

任何指向教程或像我这里这样的问题的链接都是完美的。

非常感谢你

Answer 1

你需要自动完成扩展器。阅读它

1. 代码项目教程在这里
2. 官方文档在这里
3. MSDN 教程在这里完全涵盖了您的需求

Answer 2

我会检查jQuery autocomplete。

你可以像这样使用它：

$('#<%= yourTextBox.ClientID %>').autocomplete({
    source: 'HandlerThatReturnsProductNames.ashx',
    select: function (event, ui) {
        // this is where you would jump to your product page
    }
});

然后您需要创建通用处理程序“HandlerThatReturnsProductNames.ashx”。在该ProcessRequest方法中，它需要执行以下操作：

public void ProcessRequest(HttpContext context) {

    string term = context.Request.QueryString.Get("term");

    List<QuickProduct> listOfProducts = SomeMethodThatGetsMatchingProducts(term);
    var jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    string json = jsSerializer.Serialize(listOfProducts);

    context.Response.ContentType = "application/json";
    context.Response.Write(json);
    context.Response.End();
}

假设你QuickProduct是这样的：

public class QuickProduct {
    public int value { get; set; }
    public string label { get; set; }
}