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做数据源。

    /// <summary>
    /// Summary description for ProductHandler
    /// </summary>
    /// <remarks>author Petter Liu http://wintersun.cnblogs.com </remarks>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class ProductHandler : IHttpHandler
    {
        #region Properties (1)

        /// <summary>
        /// Gets a value indicating whether another request can use the <see cref="T:System.Web.IHttpHandler"/> instance.
        /// </summary>
        /// <value></value>
        /// <returns>true if the <see cref="T:System.Web.IHttpHandler"/> instance is reusable; otherwise, false.
        /// </returns>
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

        #endregion Properties

        #region Methods (2)

        // Public Methods (2)

        /// <summary>
        /// Enables processing of HTTP Web requests by a custom HttpHandler that implements the <see cref="T:System.Web.IHttpHandler"/> interface.
        /// </summary>
        /// <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>
        public void ProcessRequest(HttpContext context)
        {
            string querystr = context.Request.Params["q"];
            context.Response.ContentType = "application/json";
            context.Response.Write(SearchProduct(querystr));
        }

        /// <summary>
        /// Searches the product.
        /// </summary>
        /// <param name="keywords">The keywords.</param>
        /// <returns>product string list</returns>
        /// <remarks>author Petter Liu  http://wintersun.cnblogs.com </remarks>
        public string SearchProduct(string keywords)
        {
            if (string.IsNullOrEmpty(keywords))
                return null;

           var productRepository = new Repository<Product>();
           var result = productRepository.GetAll().Where(p => p.Name.Contains(keywords));

           var sbresult = new StringBuilder(result.Count());
            foreach (Product p in result)
            {
                sbresult.Append(p.Name);
                sbresult.Append("|");
                sbresult.Append(p.ProductNumber);
                sbresult.Append("\n");
            }
            return sbresult.ToString();
        }

        #endregion Methods
    }

注意这里我们填充数据的时，返回了两个列(id,name)，用”|”分隔，你可以查看autocomplete.js源码parse部分，你将会更清楚为什么这么做。

然后在新建一个html，在head处增加：

    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"></script>

    <script src="Javascripts/Plugins/jquery.autocomplete.js" type="text/javascript"></script>

    <link href="Themes/Default/main.css" rel="stylesheet" type="text/css" />
    <link href="Themes/Default/jquery.autocomplete.css" rel="stylesheet" type="text/css" />

注意我这里使用 Microsoft Ajax Content Delivery Network ，非常的方便。具体使用方法，可参考Microsoft Ajax Content Delivery Network

然后在写加载时的Javascript:

$(document).ready(function() {
        $("#productname").autocomplete("ProductHandler.ashx", {
             500,
            max: 50,
            minChars: 2,
            cacheLength: 20,
            delay: 150,
            matchContains: true,
            autoFill: false,
            scrollHeight: 300,
            formatItem: function(row, i, max) {
                return i + "/" + max + ": " + row[0];
            },
            formatMatch: function(row, i, max) {
                return row[0] + " " + row[1];
            }
            //            ,formatResult: function(row) {
            //                return 'ProductName: ' + row[0] + "ProductNumber: " + row[1];
            //            }
        }).result(function(event, data, formatted) {
            $('#productnumber').val(data[1]);
            $("#selectresult").html(!data ? "No match!" : "You have selected: " + formatted);
        });

        $('#btn1').click(function() {
            alert($('#productname').val());
        })
    });

从上面的代码中，看出我们可以配制它的参数，max为最大返回数，minChar为最小匹配字符，delay为延迟时间，还有formatItem,formatMatch的callback,更多参数可以参考官方document.

好了，到这里，完了，可以看下效果：

希望这篇Post对您有帮助。

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