使用C#在ASP.Net页面中使用JQuery AutoComplete插件

时间:2009-10-27 14:34:02

标签: c# asp.net jquery-plugins

我正在尝试使用AutoComplete插件编写一些JQuery,以便在用户开始输入名称时向用户显示名称列表(请参阅下面的代码)。除非用户启动退格以更改输入的用户名,否则代码工作正常,这会导致它在自动完成结果中的现有值上写入新值。有没有我在这里做错的事情,也许是通过使用keyup函数启动自动完成功能,或者如果用户开始备份,是否有某种方法可以清除现有的自动完成结果?

以下是Default.aspx中标记文件中的JQuery代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
    <script type="text/javascript" src="js/jquery.autocomplete.js" ></script>  
    <script type="text/javascript">
    $(document).ready(function() {
        $("#example").keyup(function() {
            $.ajax({
                    type: "POST",
                    url: "Default.aspx/GetCustomerNames",
                    data: "{ searchParam: '" + $("#example").val() + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function(msg) {
                        $("#example").autocomplete(msg.d, 
                            { scroll: false, max: 10, width: 250, selectFirst: true });
                    }  
            });
        });
    });    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>        
        Customer Name:  <input id="example" autocomplete="off" type="text" />      
    </div>
    </form>
</body>
</html>

这是我的Default.aspx.cs代码隐藏文件中返回数据的代码:

[WebMethod]
public static string[] GetCustomerNames(string searchParam)
{
    List<string> data = new List<string>() { "Andrew", "Ramona", "Russ", "Russell", "Raymond", "Annette", "Anthony" };

    List<string> names = new List<string>();

    foreach (string s in data)
    {
        if (s.ToLower().StartsWith(searchParam))
        {
            names.Add(s);
        }
    }

    return names.ToArray();

}

1 个答案:

答案 0 :(得分:1)

我认为您可以将搜索页面作为自动填充功能的第一个参数。

$(document).ready(function(){
  $("#example").autocomplete("Default.aspx/GetCustomerNames", { scroll: false, max: 10, width: 250, selectFirst: true });
});

类似的东西,你可能需要找出正确的选项来让它做你想做的事情,但至少它不会在每个键盘后重新安装自动完成。