简体   繁体   English

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

[英]JQuery AutoComplete plugin in ASP.Net page with C#

I'm trying to write some JQuery using the AutoComplete plugin to display a list of names to the user as the user starts to type in the names (see code below). 我正在尝试使用AutoComplete插件编写一些JQuery,以在用户开始输入名称时向用户显示名称列表(请参见下面的代码)。 The code is working fine unless the user starts backspacing to change the name of the user entered, which causes it to write new values over the existing ones in the autocomplete results. 除非用户开始后退空格以更改输入的用户名,否则代码将无法正常工作,这将导致代码在自动完成结果中的现有值之上写入新值。 Is there something I'm doing wrong here, maybe by using the keyup function to kick off the autocomplete, or is there some way to clear the existing autocomplete results if the user starts to backup? 我在这里做错什么了吗,也许是通过使用keyup函数启动自动完成功能,或者如果用户开始备份,是否有某种方法可以清除现有的自动完成结果?

Here is the JQuery code in the markup file in Default.aspx: 这是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>

And here is the code in my Default.aspx.cs codebehind file returning the data: 这是我的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();

}

I was under the impression that you could give a search page as the first parameter to the autocomplete function. 我的印象是,您可以将搜索页面作为自动完成功能的第一个参数。

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

Something like that, you may need to find out the correct options to use to get it to do what you want, but at least it won't be reinstalling the autocomplete after each keyup. 像这样的事情,您可能需要找出正确的选项来使它执行您想要的操作,但是至少在每次键入密钥后,它都不会重新安装自动完成功能。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM