我在这个网站和网络上到处寻找使用jQuery和ASP.NET的autocomplete的一个很好的简单的例子,我想用webservice公开autocomplete使用的数据(下一步可能会这样做)。在此期间,我让它工作了,但它看起来有点老土...
在我的页面中有一个文本框:
<input id="txtSearch" type="text" />
我使用的是jQuery autocomplete,按照他们的例子设置:
<link rel="stylesheet" href="js/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="js/jquery.bgiframe.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.pack.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
这是它开始变得棘手的地方..。我调用的是页面,而不是call服务:
<script type="text/javascript">
$(document).ready(function(){
$("#txtSearch").autocomplete('autocompletetagdata.aspx');
});
</script>
在页面中,我去掉了所有的html,只有这个(否则,在autocomplete下拉列表中会显示各种HTML位):
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="autocompletetagdata.aspx.cs" Inherits="autocompletetagdata" %>
在我的autocompletetagdata.aspx中,我使用SubSonic从数据库中查询、格式化和返回数据(每行一个数据项):
protected void Page_Load(object sender, EventArgs e)
{
// Note the query strings passed by jquery autocomplete:
//QueryString: {q=a&limit=150×tamp=1227198175320}
LookupTagCollection tags = Select.AllColumnsFrom<LookupTag>()
.Top(Request.QueryString["limit"])
.Where(LookupTag.Columns.TagDescription).Like(Request.QueryString["q"] + "%")
.OrderAsc(LookupTag.Columns.TagDescription)
.ExecuteAsCollection<LookupTagCollection>();
StringBuilder sb = new StringBuilder();
foreach (LookupTag tag in tags)
{
sb.Append(tag.TagDescription).Append("\n");
}
Response.Write(sb.ToString());
}
如果您不执行LIKE查询,那么它将返回包含与您键入的字符匹配的所有内容--例如,输入"a“将包括"Ask”和"Answer“以及"March”和“Mega”。我只想让它从比赛开始。
无论如何,它是有效的,并且很容易设置,但是有没有更好的方法呢?
发布于 2008-11-20 16:56:57
我最近刚刚实现了自动完成,它看起来非常相似。我使用的是一个ashx (泛型处理程序),而不是aspx,但它在代码背后基本上是相同的代码。
使用ashx,它看起来像这样:
<script type="text/javascript">
$(document).ready(function(){
$("#txtSearch").autocomplete('autocompletetagdata.ashx');
});
</script>
[WebService(Namespace = "http://www.yoursite.com/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class AutocompleteTagData : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
// Note the query strings passed by jquery autocomplete:
//QueryString: {q=a&limit=150×tamp=1227198175320}
LookupTagCollection tags = Select.AllColumnsFrom<LookupTag>()
.Top(context.Request.QueryString["limit"])
.Where(LookupTag.Columns.TagDescription).Like(context.Request.QueryString["q"] + "%")
.OrderAsc(LookupTag.Columns.TagDescription)
.ExecuteAsCollection<LookupTagCollection>();
foreach (LookupTag tag in tags)
{
context.Response.Write(tag.TagDescription + Environment.NewLine);
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
发布于 2009-05-27 19:03:27
我刚刚在另一个问题上发表了这篇文章,但是您可以覆盖jQuery autocomplete插件上的解析函数,使其支持任何输出。
示例:
$("#<%= TextBox1.ClientID %>").autocomplete("/Demo/WebSvc.asmx/SuggestCustomers", {
parse: function(data) {
var parsed = [];
$(data).find("string").each(function() {
parsed[parsed.length] = {
data: [$(this).text()],
value: $(this).text(),
result: [$(this).text()]
};
});
return parsed;
},
dataType: "xml"
});
所需要的只是XML的字符串数组...很容易做到……如果你使用的是SubSonic,你应该检查一下RESTHandler (它是一个隐藏的宝石!),它支持对所有对象的基本查询,并且可以返回JSON/XML。下面是一个使用它的查询示例...
/Demo/services/Customers/list.xml?CustomerName=JOHN
如果您将list.xml更改为list.json,则会将结果更改为JSON。上面的请求将返回一个强类型的"Customer“实体。您可以将参数更改为support LIKE、NOT LIKE等。非常强大所有的管道都是有铅的..。
上面有一段视频:http://subsonicproject.com/tips-and-tricks/webcast-using-subsonic-s-rest-handler/
发布于 2008-11-20 17:09:07
web服务或WCF服务将为您提供更好的界面。还可以将两者都设置为执行Json序列化。
由于我在编写时采用了一个WCF类(我正在休息,真的!),所以我将概述WCF方法。
[OperationContract]
[WebInvoke(RequestFormat=WebMessageFormat.Json,
ResponseFormat=WebMessageFormat.Json)]
public LookupTagCollection LookupTags( int limit, string q )
{
return Select.AllColumnsFrom<LookupTag>()
.Top(limit)
.Where(LookupTag.Columns.TagDescription)
.Like(q+ "%")
.OrderAs(LookupTag.Columns.TagDescription)
.ExecuteAsCollection<LookupTagCollection>();
}
LookupTagCollection需要是可序列化的。
https://stackoverflow.com/questions/305994
复制相似问题