jQuery自动完成和ASP.NET
我在这个网站和networking上search了一个使用jQuery和ASP.NET的自动完成的简单例子。 我想用web服务公开自动完成所使用的数据（下一步可能会这样做）。 在此期间，我得到了这个工作，但似乎有点哈克…
在我的页面中，我有一个文本框：
<input id="txtSearch" type="text" /> 我正在使用jQuery自动完成，按照他们的例子设置：
<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>
这里是开始得到hacky的地方…我打电话给一个页面，而不是一个web服务：
<script type="text/javascript"> $(document).ready(function(){ $("#txtSearch").autocomplete('autocompletetagdata.aspx'); }); </script>
在页面中我删除了所有的HTML，只是有这个（否则，各种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查询，那么它将返回包含你input的字符匹配的所有东西 – 例如，input“a”将包括“Ask”和“Answer”以及“March”，并且“兆”。 我只是想让它开始比赛。
无论如何，它的工作原理，这是很容易设置，但有没有更好的办法？
我刚刚实现了自动完成，看起来相当类似。 我正在使用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; } } }
我只是在另一个问题上发布了这个问题，但是你可以重写jQuery自动完成插件上的parsing函数，使其支持任何输出。
例：
$("#<%= 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" });
所有这些期望是一个string数组到XML …很容易做…如果您使用SubSonic，你应该检查出RESTHandler（这是一个隐藏的GEM !!!），它支持所有的对象的基本查询，可以返回JSON / XML。 这是一个使用它的示例查询…
/Demo/services/Customers/list.xml?CustomerName=JOHN
如果将list.xml更改为list.json，则会将结果更改为JSON。 上面的请求将返回一个强types的“客户”实体。 你可以改变参数来支持LIKE，NOT LIKE等等。非常强大，所有的pipe道工作都已经完成了。
这里是一个video： http : //subsonicproject.com/tips-and-tricks/webcast-using-subsonic-s-rest-handler/
Web服务或WCF服务将为您提供更好的界面。 两者都可以设置做Json序列化。
由于我正在写一个WCF类（我正在rest，真的！），我将画出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需要是可序列化的。
Jquery 1.8 Autocomplete使用“term”而不是“q”作为查询string参数。 这是我实现的短而甜的版本。 希望这有助于某人。
使用Javascript：
$(function () { $("#autocomplete").autocomplete({ source: "/pathtohandler/handler.ashx", minLength: 1, select: function (event, ui) { $(this).val(ui.item.value); } }); });
ASHX Handler：
public class SearchHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { var term = context.Request.QueryString["term"].ToString(); context.Response.Clear(); context.Response.ContentType = "application/json"; var search = //TODO implement select logic based on the term above JavaScriptSerializer jsSerializer = new JavaScriptSerializer(); string json = jsSerializer.Serialize(search); context.Response.Write(json); context.Response.End(); } public bool IsReusable { get { return false; } } }
