JQuery插件之Autocomplete
JQuery插件真是太多了，今天来说下Autocomplete。大家都有用过Baidu,Google,都已体验过Autocomplete了。我们在Asp.net 也可以实现累似的效果。
使用jQuery plugin: Autocomplete，此处我使用的是Asp.net webform，当然你也可以使用Asp.net MVC。在MVC中，我们使用Controller/Action 返回数
据，在Asp.net webform 使用Handler即可。
我们先来实现一个DataHandler,看Code,这里使用LinqToSQL做数据源。
1: /// <summary>
2: /// Summary description for ProductHandler
3: /// </summary>
4: /// <remarks>author Petter Liu http://wintersun.cnblogs.com </remarks>
5: [WebService(Namespace = "http://tempuri.org/")]
6: [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
7: public class ProductHandler : IHttpHandler
8: {
9: #region Properties (1)
10:
11: /// <summary>
12: /// Gets a value indicating whether another request can use the <see cref="T:System.Web.IHttpHandler"/> instance.
13: /// </summary>
14: /// <value></value>
15: /// <returns>true if the <see cref="T:System.Web.IHttpHandler"/> instance is reusable; otherwise, false.
16: /// </returns>
17: public bool IsReusable
18: {
19: get
20: {
21: return false;
22: }
23: }
24:
25: #endregion Properties
26:
27: #region Methods (2)
28:
29: // Public Methods (2)
30:
31: /// <summary>
32: /// Enables processing of HTTP Web requests by a custom HttpHandler that implements the <see cref="T:System.Web.IHttpHandler"/> interface.
33: /// </summary>
34: /// <param name="context">An <see cref="T:System.Web.HttpContext"/> object that provides references to the intrinsic server objects (for example, Request, Response, Session, and Server) used to service HTTP requests.</param>
35: public void ProcessRequest(HttpContext context)
36: {
37: string querystr = context.Request.Params["q"];
38: context.Response.ContentType = "application/json";
39: context.Response.Write(SearchProduct(querystr));
40: }
41:
42: /// <summary>
43: /// Searches the product.
44: /// </summary>
45: /// <param name="keywords">The keywords.</param>
46: /// <returns>product string list</returns>
47: /// <remarks>author Petter Liu http://wintersun.cnblogs.com </remarks>
48: public string SearchProduct(string keywords)
49: {
50: if (string.IsNullOrEmpty(keywords))
51: return null;
52:
53: var productRepository = new Repository<Product>();
54: var result = productRepository.GetAll().Where(p => p.Name.Contains(keywords));
55:
56: var sbresult = new StringBuilder(result.Count());
57: foreach (Product p in result)
58: {
59: sbresult.Append(p.Name);
60: sbresult.Append("|");
61: sbresult.Append(p.ProductNumber);
62: sbresult.Append("\n");
63: }
64: return sbresult.ToString();
65: }
66:
67: #endregion Methods
68: }
注意这里我们填充数据的时，返回了两个列(id,name)，用”|”分隔，你可以查看autocomplete.js源码parse部分，你将会更清楚为什么这么做。
然后在新建一个html，在head处增加：
1: <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"></script>
2:
3: <script src="Javascripts/Plugins/jquery.autocomplete.js" type="text/javascript"></script>
4:
5: <link href="Themes/Default/main.css" rel="stylesheet" type="text/css" />
6: <link href="Themes/Default/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
注意我这里使用 Microsoft Ajax Content Delivery Network ，非常的方便。具体使用方法，可参考Microsoft Ajax Content Delivery Network
然后在写加载时的Javascript:
1: $(document).ready(function() {
2: $("#productname").autocomplete("ProductHandler.ashx", {
3: width: 500,
4: max: 50,
5: minChars: 2,
6: cacheLength: 20,
7: delay: 150,
8: matchContains: true,
9: autoFill: false,
10: scrollHeight: 300,
11: formatItem: function(row, i, max) {
12: return i + "/" + max + ": " + row[0];
13: },
14: formatMatch: function(row, i, max) {
15: return row[0] + " " + row[1];
16: }
17: // ,formatResult: function(row) {
18: // return 'ProductName: ' + row[0] + "ProductNumber: " + row[1];
19: // }
20: }).result(function(event, data, formatted) {
21: $('#productnumber').val(data[1]);
22: $("#selectresult").html(!data ? "No match!" : "You have selected: " + formatted);
23: });
24:
25: $('#btn1').click(function() {
26: alert($('#productname').val());
27: })
28: });
从上面的代码中，看出我们可以配制它的参数，max为最大返回数，minChar为最小匹配字符，delay为延迟时间，还有formatItem,formatMatch的callback,更多参数可以参考官方document.
好了，到这里，完了，可以看下效果：
希望这篇Post对您有帮助。
Author:Petter Liu http://wintersun.cnblogs.com