jQuery-AJAX将下拉列表重新绑定到存储过程的结果

Question

我有一个很长的人名下拉列表。 多达2,000个名字。 我想通过一次将下拉列表限制为名称的子集，来更轻松地找到用户感兴趣的名称。 我通过创建一系列26个链接（A，B，C ... Z）来完成此操作，这些链接在后面的代码中调用一个方法，该方法仅使用用户单击字母开头的名称填充下拉列表。

这一切都很好，但是我希望能够使用AJAX完成下拉列表的更新而无需刷新页面。 我想将jQuery用于AJAX功能，而不是ASP.NET AJAX。

我的问题是我不确定如何执行存储过程，然后通过jQuery AJAX将下拉列表与新数据集“重新绑定”。 有什么建议或资源可以提供示例或演练吗？ 谢谢。

Answer 1

为您提供一些指导。

首先创建一个页面， webservice或httphandler ，以接收您的帖子并返回json。

处理器：

public void GetNames(HttpContext context)
{
    context.Response.ContentType = "application/json";
    context.Response.ContentEncoding = Encoding.UTF8;

    var results = DataAccess.GetNames(context.Request["letter"]);

    string json = //encode results to json somehow, json.net for example.

    context.Response.Write(json );
}

标记

<ul>
  <li>A</li>
</ul>

<select id="names">
</select>

执行$ .post的脚本

$(function(){
  $("li").click(function(){
    var letter = $(this).text();
    $.post("SomeUrl/GetNames", {letter: letter}, function(data){
     var $sel = $("#names").empty();
     $.each(data, function(){
       //this assumes the json is an array in the format of {value: 1, name:'joe'}
       $sel.append("<option value='" + this.value + "'>" + this.name+ "</option>");
     });
    }, "json");
  });
});

那应该是如何完成任务的好大纲。

一些其他资源。

• jQuery AJAX教程
• 在MSDN上介绍JSON
• json.net
• jQuery文档
• 创建一个返回json的http处理程序 （博客上的其他文章也可能有用）

Answer 2

jQuery Autocomplete插件可能对您有效。