JQuery插件真是太多了,后天来说下Autocomplete。大家都有用过Baidu,谷歌,都已体验过Autocomplete了。大家在Asp.net
也能够兑现累似的效率。
使用jQuery plugin:
Autocomplete
,此处作者动用的是Asp.net
webform,当然你也可以选取Asp.net MVC。在MVC中,大家运用Controller/Action
再次回到数
据,在Asp.net webform 使用Handler即可。

        我们先来贯彻2个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.

好了,到那里,完了,能够看下效果:

图片 1

瞩望那篇Post对你有帮助。

Author:Petter Liu     http://wintersun.cnblogs.com

相关文章

网站地图xml地图