JQuery插件之Autocomplete

盼望那篇Post对你有救助。

然后在新建一个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" />

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

留神那里我们填充数据的时,重回了五个列(id,name),用”|”分隔,你可以查看autocomplete.js源码parse部分,你将会更明了怎么这样做。

图片 1

        大家先来达成一个DataHandler,看Code,那里运用LinqToSQL做数据源。

从地点的代码中,看出大家得以配制它的参数,max为最大再次回到数,minChar为最小匹配字符,delay为延迟时间,还有formatItem,formatMatch的callback,越来越多参数可以参考官方document.

   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:      }

       
JQuery插件真是太多了,后天以来下Autocomplete。大家都有用过Baidu,谷歌(Google),都已体验过Autocomplete了。大家在Asp.net
也落到实处累似的功能。
使用jQuery plugin:
Autocomplete
,此处我动用的是Asp.net
webform,当然你也可以选择Asp.net MVC。在MVC中,我们运用Controller/Action
再次来到数
据,在Asp.net webform 使用Handler即可。

注意自己那里运用 Microsoft Ajax Content Delivery
Network

,极度的便利。具体采取形式,可参看Microsoft Ajax Content Delivery
Network

   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:      });

接下来在写加载时的Javascript:

相关文章