介绍一款jquery的autocomplete插件

官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

Jquery AutoComplete的使用方法实例

jQuery的Autocomplete（自动完成、自动填充）插件有不少，但比较下来我感觉，还是bassistance.de的JQuery Autocomplete plugin比较强大，我们就来写一些代码感受一下。

jquery-autocomplete配置：

首先是一个最简单的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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery autocomplete</title>
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.autocomplete.min.js" type="text/javascript"></script>
    <link href="/CSS/default/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <input type="text" id="userName" style="width:200px;" />
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#userName").autocomplete("/handler/autocomplete.ashx", {
                max: 20,    //列表里的条目数
                minChars: 2,    //自动完成激活之前填入的最小字符
                width: 200,     //提示的宽度，溢出隐藏
                scrollHeight: 300,   //提示的高度，溢出显示滚动条
                matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
                autoFill: false,    //自动填充);
                delay: 500,
                parse: function (data) {
                    return $.map(eval(data), function (row) {
                        return {
                            data: row,
                            value: row.text,    //此处无需把全部列列出来，只是两个关键列
                            result: row.sort
                        }
                    })
                },
                formatItem: function (data, i, total) {
                    return "<table><tr><td align='left'>" + data.text + "</td><td align='right'> " + data.sort + " </td></tr></table>";
                },
                formatMatch: function (data, i, total) {
                    return data.text;
                }
            }).result(function (event, data, formatted) { //回调
                $('#userName').val(data.text);   //不知为何自动返回值后总是加了个“,”,所以改成后赋值
                //$("#content").val(data.Guage + data.Unit);
            }); ;
        });    
    </script>
</body>
</html>

    public class autocomplete : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.Clear();
            context.Response.ContentType = "text/html";
            context.Response.Write(getNames());
            context.Response.End();
        }

        public string getNames()
        {
            string ret = "[";
            for (int i = 0; i < 100; i++)
            {
                if (i > 0) ret += ",";
                ret += string.Format("{{\"sort\":\"{0}\",\"text\":\"{0}\"}}", "张三" + i);
            }
            ret += "]";
            return ret;
        }


        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

还有一款是jquery ui里面的autocomplete这个可以在

http://jqueryui.com/autocomplete

<!doctype html>
 
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Autocomplete - Remote datasource</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  .ui-autocomplete-loading {
    background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
  }
  </style>
  <script>
  $(function() {
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( "#log" );
      $( "#log" ).scrollTop( 0 );
    }
 
    $( "#birds" ).autocomplete({
      source: "search.php",
      minLength: 2,
      select: function( event, ui ) {
        log( ui.item ?
          "Selected: " + ui.item.value + " aka " + ui.item.id :
          "Nothing selected, input was " + this.value );
      }
    });
  });
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="birds">Birds: </label>
  <input id="birds" />
</div>
 
<div class="ui-widget" style="margin-top: 2em; font-family: Arial;">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
 
 
</body>
</html>

服务端返回的json格式为:[{"id":"","label":"","value":""}]即可有效果。

    public class FarmerNameSearch : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            string tp;
            context.Response.Clear();
            context.Response.ContentEncoding = Encoding.UTF8;
            if (context.Request.QueryString["type"] != null)
            {
                tp = context.Request.QueryString["type"];
                if (tp == "farmername")
                {
                    context.Response.Write(getFarmeName(context.Request.QueryString["term"] == null ? Guid.NewGuid().ToString() : context.Request.QueryString["term"]));
                }
            }
            context.Response.ContentType = "text/html";
            context.Response.End();
        }


        public string getFarmeName(string farmerName)
        {
            StringBuilder ret = new StringBuilder();
            ret.Append("[");
            string sql = string.Format("SELECT TOP 20 * FROM FarmerInfo WHERE FarmerNameSort like '%{0}'", farmerName);
            General gen = new General();
            DataTable dt = gen.GetList(sql);
            bool f = false;
            foreach (DataRow rw in dt.Rows)
            {
                if (f)
                    ret.Append(",");
                ret.AppendFormat("{{\"id\":\"{0}\",\"label\":\"{1}\",\"value\":\"{2}\"}}", rw["FarmerID"], rw["FarmerName"], rw["FarmerName"]);
                f=true;
            }
            ret.Append("]");
            return ret.ToString();
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }