官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
Jquery AutoComplete的使用方法实例
jQuery的Autocomplete（自动完成、自动填充）插件有不少，但比较下来我感觉，还是bassistance.de的JQuery Autocomplete plugin比较强大，我们就来写一些代码感受一下。
jquery-autocomplete配置：
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>
<link rel="Stylesheet" href="/js/jquery.autocomplete.css" />
首先是一个最简单的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="200px;" /> <script type="text/javascript" language="javascript"> $(document).ready(function () { $("#userName").autocomplete("/handler/autocomplete.ashx", { max: 20, //列表里的条目数 minChars: 2, //自动完成激活之前填入的最小字符 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; 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; } } }
