JQuery的自动完成插件在ASP.Net页与C＃ [英] JQuery AutoComplete plugin in ASP.Net page with C#
问题描述
我试图使用自动完成插件在用户开始输入名称显示名称为用户的列表写一些jQuery（见下文code）。除非用户开始退格更改输入的用户，这导致它超过了自动完成结果的现有写入新值的名称code是工作的罚款。是不是我做错了这里，也许通过KEYUP功能揭开序幕的自动完成，或者是有一些方式，如果用户开始备份以清除现有的自动完成结果？
下面是Default.aspx中标记文件JQuery的code：
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT;头=服务器＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / jQuery的-1.3.2.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =JS / jquery.autocomplete.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（文件）。就绪（函数（）{
$（＃示例）。KEYUP（函数（）{
$阿贾克斯（{
键入：POST，
网址：Default.aspx的/ GetCustomerNames
数据：{searchParam：'+ $（＃示例）VAL（）+'}，
的contentType：应用/ JSON的;字符集= UTF-8，
数据类型：JSON
成功：函数（MSG）{
$（＃示例）。自动完成（msg.d，
{滚动：假的，最长为10个，宽度：250，selectFirst：真}）;
}
}）;
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;表ID =form1的=服务器＆GT;
＆LT; DIV＆GT;
客户名称：其中，输入ID =榜样自动完成=关闭类型=文本/＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
这里是code在我Default.aspx.cs codebehind文件中的数据返回：
[的WebMethod]
公共静态字符串[] GetCustomerNames（字符串searchParam）
{
清单＆LT;串GT;数据=新的List＆LT;串GT;（）{安德鲁，雷蒙娜，拉斯，罗素，翔，安妮特，安东尼}; 清单＆LT;串GT;名称=新的List＆LT;串GT;（）; 的foreach（数据字符串s）
{
如果（s.ToLower（）。StartsWith（searchParam））
{
names.Add（多个）;
}
} 返回names.ToArray（）;}
我是IM pression，你可以给一个搜索页面作为第一个参数来自动完成功能下。
$（文件）。就绪（函数（）{
$（＃示例）自动完成（Default.aspx的/ GetCustomerNames，{滚动：假的，最长为10个，宽度：250，selectFirst：真正}）。
}）;
类似的东西，你可能需要找出正确的选项用来得到它做你想要什么，但至少它不会每次KEYUP后重新安装自动完成。
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). 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?
Here is the JQuery code in the markup file in Default.aspx:
<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:
[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.
这篇关于JQuery的自动完成插件在ASP.Net页与C＃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
