利用jQuery + Handler(ashx) + LINQ 實現 Autocomplete

2009-03-10

22281
0
ASP.NET

前陣子剛好有人提到這樣問題
小弟就寫一個類似的範例,分享給大家呀..

前陣子剛好有人提到這樣問題

小弟就寫一個類似的範例,分享給大家呀..

首先要先準備好一個DB,內容如下：

接下來準備好jQuery Autocomplete會用到的js與css
下載網址：http://www.pengoworks.com/workshop/jquery/autocomplete.htm

asp.net(c#)

AutoComplete.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete.aspx.cs" Inherits="AutoComplete" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>AutoComplete</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1"); //載入jquery,版本1.x最</script> <link rel="stylesheet" href="js/jquery.autocomplete.css" type="text/css" /> <script type="text/javascript" src="js/jquery.autocomplete.js"></script> </head> <body> <form id="form1" runat="server"> <div> <input id="txtSearch" type="text" /> </div> </form> </body> </html> <script type="text/javascript"> $(function() { $("#txtSearch").autocomplete('AutoComplete.ashx'); //由ashx取得資料 }); </script>

AutoComplete.ashx

<%@ WebHandler Language="C#" Class="AutoComplete" %> using System; using System.Web; using System.Linq; public class AutoComplete : IHttpHandler { public void ProcessRequest(HttpContext context) { //取得TextBox的文字 string q = context.Request.QueryString["q"].ToString(); //LINQ DataClassesDataContext db = new DataClassesDataContext(); var Query = from cust in db.Table1 where cust.name.StartsWith(q) orderby cust.name select cust.name; //將查詢結果輸出 context.Response.Write(string.Join(Environment.NewLine, Query.ToArray())); } public bool IsReusable { get { return false; } } }

執行結果：

參考網址：
http://www.blueshop.com.tw/board/show.asp?subcde=BRD20090225121211T2I&fumcde=FUM20041006161839LRJ
http://stackoverflow.com/questions/305994/jquery-autocomplete-and-asp-net

回首頁