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（自动完成）代码片段：

 

 1  < html  xmlns ="http://www.w3.org/1999/xhtml" >
 2  < head  runat ="server" >
 3       < title > AutoComplate </ title >
 4       < script  type ="text/javascript"  src ="/js/jquery-1.4.2.min.js" ></ script >
 5       < script  type ="text/javascript"  src ="/js/jquery.autocomplete.min.js" ></ script >
 6       < link  rel ="Stylesheet"  href ="/js/jquery.autocomplete.css"   />
 7       < script  type ="text/javascript" >
 8          $( function () {
 9               var  data  =   " Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities " .split( "   " );
10 
11              $( ' #keyword ' ).autocomplete(data).result( function (event, data, formatted) {
12                  alert(data);
13              });
14          });
15       </ script >
16  </ head >
17  < body >
18       < form  id ="form1"  runat ="server" >
19       < div >
20           < input  id ="keyword"   />
21           < input  id ="getValue"  value ="GetValue"  type ="button"   />
22       </ div >
23       </ form >
24  </ body >
25  </ html >

 

result方法是jQuery Autocomplete插件里的重要方法，它在用户在选定了某个条目时触发。data参数为选中的数据。

 

一个稍微复杂的例子，可以自定义提示列表:

 1  < html  xmlns ="http://www.w3.org/1999/xhtml" >
 2  < head  runat ="server" >
 3       < title > 自定义提示 </ title >
 4       < script  type ="text/javascript"  src ="/js/jquery-1.4.2.min.js" ></ script >
 5       < script  type ="text/javascript"  src ="/js/jquery.autocomplete.min.js" ></ script >
 6       < link  rel ="Stylesheet"  href ="/js/jquery.autocomplete.css"   />
 7       < script  type ="text/javascript" >
 8           var  emails  =  [
 9              { name:  " Peter Pan " , to:  " peter@pan.de "  },
10              { name:  " Molly " , to:  " molly@yahoo.com "  },
11              { name:  " Forneria Marconi " , to:  " live@japan.jp "  },
12              { name:  " Master <em>Sync</em> " , to:  " 205bw@samsung.com "  },
13              { name:  " Dr. <strong>Tech</strong> de Log " , to:  " g15@logitech.com "  },
14              { name:  " Don Corleone " , to:  " don@vegas.com "  },
15              { name:  " Mc Chick " , to:  " info@donalds.org "  },
16              { name:  " Donnie Darko " , to:  " dd@timeshift.info "  },
17              { name:  " Quake The Net " , to:  " webmaster@quakenet.org "  },
18              { name:  " Dr. Write " , to:  " write@writable.com "  },
19              { name:  " GG Bond " , to:  " Bond@qq.com "  },
20              { name:  " Zhuzhu Xia " , to:  " zhuzhu@qq.com "  }
21          ];
22 
23              $( function () {
24                  $( ' #keyword ' ).autocomplete(emails, {
25                      max:  12 ,     // 列表里的条目数
26                      minChars:  0 ,     // 自动完成激活之前填入的最小字符
27                      width:  400 ,      // 提示的宽度，溢出隐藏
28                      scrollHeight:  300 ,    // 提示的高度，溢出显示滚动条
29                      matchContains:  true ,     // 包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
30                      autoFill:  false ,     // 自动填充
31                      formatItem:  function (row, i, max) {
32                           return  i  +   ' / '   +  max  +   ' :" '   +  row.name  +   ' "[ '   +  row.to  +   ' ] ' ;
33                      },
34                      formatMatch:  function (row, i, max) {
35                           return  row.name  +  row.to;
36                      },
37                      formatResult:  function (row) {
38                           return  row.to;
39                      }
40                  }).result( function (event, row, formatted) {
41                      alert(row.to);
42                  });
43              });
44       </ script >
45  </ head >
46  < body >
47       < form  id ="form1"  runat ="server" >
48       < div >
49           < input  id ="keyword"   />
50           < input  id ="getValue"  value ="GetValue"  type ="button"   />
51       </ div >
52       </ form >
53  </ body >
54  </ html >

 

formatItem、formatMatch、formatResult是自定提示信息的关键。

formatItem作用在于可以格式化列表中的条目，比如我们加了“I”，让列表里的字显示出了斜体。

formatMatch是配合formatItem使用，作用在于，由于使用了formatItem，所以条目中的内容有所改变，而我们要匹配的是原始的数据，所以用formatMatch做一个调整，使之匹配原始数据，

formatResult是定义最终返回的数据，比如我们还是要返回原始数据，而不是formatItem过的数据。

想知道如果数据是从数据库读的,这个怎么处理的。不可能把所有的都读取出来放到本地吧。

支持(0) 反对(0)

  

#2楼   2010-03-20 08:02  汉马   

博主给个下载地址吧！挺有用的。

支持(0) 反对(0)

  

#3楼   2010-03-20 12:28  碳素墨水   

@清海扬波
autocomplete("data.ashx");
=============
第一个参数改为URL。autocomplete会自动发送请求如：data.ashx?q=123&limit=10&timespan=2324242。q为查询参数，limit为显示或查询的最多项。
地址1： http://docs.jquery.com/Plugins/Autocomplete
地址2： http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

支持(0) 反对(0)

  

#4楼 [ 楼主]  2010-03-20 16:27  ido   

@清海扬波
数据的读取方式是自己决定的

支持(0) 反对(0)

  

#5楼 [ 楼主]  2010-03-20 16:28  ido   

@汉马
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

支持(0) 反对(0)

  

#6楼   2010-09-10 16:36  後續   

autocomplete("data.ashx");
ashx返回的是字符串
怎么在页面前台转换为脚本。

我在ashx里面拼的数组字符串，
返回了根本就不按照数组执行，
求解答！

支持(0) 反对(0)

  

#7楼   2010-09-10 16:37  後續   

autocomplete("data.ashx");
ashx返回的是字符串
怎么在页面前台转换为脚本。

我在ashx里面拼的数组字符串，
返回了根本就不按照数组执行，
求解答！

-，-回错人了。

支持(0) 反对(0)

  

#8楼   2011-07-05 17:21  freshfish   

http://topic.csdn.net/u/20090703/14/8d349262-8ca1-4bf5-998d-3a0712412149.html

支持(0) 反对(0)

  

#9楼   2012-03-21 16:12  风云super   

大鸟们帮我看看为什么这段代码，当数据源用服务器异步获取的时候，中文检索出不来结果。请问是怎么回事儿啊？如果要把数据直接写成json是可以的，不知道为什么！！！请各位帮帮忙啊！

代码：

$("#txtAllKey").autocomplete("user.ashx", {
minChars: 1,
width: 250,
max: 50,
matchContains: true,
autoFill: false,
extraParams: { method:"methodname",rnt:Math.random()
},
parse: function(data) {
return $.map(eval(data), function(row) {
return {
data: row,
value: row.NameCn + row.NameEn + row.PinYin,
result: row.NameCn
}
});
},
formatItem: function(row, i, max) {
return row.NameCn + row.NameEn ;
},
formatMatch: function(row, i, max) {
return row.NameCn + row.NameEn + row.PinYin;
},
formatResult: function(row) {
return row.NameCn;
}
}).result(function(event, jsonCity, formatted) {alert(row.NameCn);
});

问题如何解决：

jquery autocomplete的返回数据问题

多列输出：
下面这种可以显示正常，达到2列输出，选中了一行后，可以把值填到textbox中：

JavaScript code

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

var  emails = [      { name:  "Peter Pan" , to:  "peter@pan.de"  },      { name:  "Molly" , to:  "molly@yahoo.com"  },      { name:  "Forneria Marconi" , to:  "live@japan.jp"  },      { name:  "Master <em>Sync</em>" , to:  "205bw@samsung.com"  },      { name:  "Dr. <strong>Tech</strong> de Log" , to:  "g15@logitech.com"  },      { name:  "Don Corleone" , to:  "don@vegas.com"  },      { name:  "Mc Chick" , to:  "info@donalds.org"  },      { name:  "Donnie Darko" , to:  "dd@timeshift.info"  },      { name:  "Quake The Net" , to:  "webmaster@quakenet.org"  },      { name:  "Dr. Write" , to:  "write@writable.com"  } ]; $( "#autocomplete" ).autocomplete(emails, {                      minChars: 0,                       max:15,                       width: 200,                      scroll:  false ,                      scrollHeight: 500,              formatItem:  function (data, i, total) {                      return  "<div style='float:left'>" +data.name+data.to+ "</div>"               },               formatMatch:  function (data, i, total) {                          return  data.name;                       },               formatResult:  function (data, value) {                           return  data.name;                      }                  }).result( function (event, data, formatted) {                          $( "#twoColum_abbr" ).val(data.to);                      });

但是换成aspx输出的时候就不行了：

JavaScript code

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

$( "#autocomplete" ).autocomplete( "data.aspx" , {                      minChars: 0,                       max:15,                       width: 200,                      scroll:  false ,                      scrollHeight: 500,              formatItem:  function (data, i, total) {                      return  "<div style='float:left'>" +data.name+data.to+ "</div>"               },               formatMatch:  function (data, i, total) {                          return  data.name;                       },               formatResult:  function (data, value) {                           return  data.name;                      }                  }).result( function (event, data, formatted) {                          $( "#twoColum_abbr" ).val(data.to);                      });

data.aspx的 Codebehind:该aspx输出到页面上的时候数据格式和emails 的数据格式是一样的，但是用这个作为数据源的时候
却总是全部输出。
问题所在 ：我的问题基本和这位兄弟是一样的：http://www.javaeye.com/problems/17478

C# code

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

protected  void  Page_Load( object  sender, EventArgs e)      {          if  (!IsPostBack)          {              Response.Clear();              Response.Charset =  "utf-8" ;              Response.Buffer =  true ;              this .EnableViewState =  false ;              Response.ContentEncoding = System.Text.Encoding.UTF8;              Response.ContentType =  "text/plain" ;              Response.Write(GetLikeUserName());              Response.Flush();              Response.Close();              Response.End();          }      }      private  string  GetLikeUserName()      {          string [] str ={  "January" ,  "Ceshi" ,  "jQuery" ,  "josn" ,  "February" ,  "March" ,  "April" ,  "May" ,  "June" ,  "July" ,  "August" ,  "September" ,  "October" ,  "November" ,  "December"  };          StringBuilder sbstr =  new  StringBuilder();          sbstr.Append( "[" );          for  ( int  i = 0; i < str.Length; i++)          {              if  (i == str.Length - 1)              {                  sbstr.Append( "{name:'"  + str[i] +  "',to:'最后中文测试"  + i +  "'}" );              }              else              {                  sbstr.Append( "{name:'"  + str[i] +  "',to:'中文测试"  + i + Request.QueryString[ "q" ] +  "'}," );              }          }          sbstr.Append( "]" );                    return  sbstr.ToString();      }

顶的都有分，解决问题的重分酬谢，不够的话我加。谢谢了！比较急。

data.aspx没做过滤.

When a user starts typing in the input box, the autocompleter will request autocomplete_ajax.cfm with a GET parameter named q that contains the current value of the input box. Let's assume that the user has typed "sp" (without quotes). Autocomplete will then request autocomplete_ajax.cfm?q=sp.

意思是,当用户有输入的时候,autocomplete就会做一个这样的事情.
将第一个参数用GET的方式获取数据.而且将用户输入作为参数传递.
所以你的ASPX中要用request.getParameter("p")来做条件过滤.

可能我讲的不是很清楚，我试指返回数据为什么不是跟emials的数据格式一样，emials是json的数据格式可以用的，但是我的 
aspx返回的也是这样的格式，可它不认,为什么？
你看返回的数据全放再一个行里面了：
[{name:'January',to:'中文测试0z'},{name:'Ceshi',to:'中文测试1z'},{name:'jQuery',to:'中文测试2z'},{name:'josn',to:'中文测试3z'},{name:'February',to:'中文测试4z'},{name:'March',to:'中文测试5z'},{name:'April',to:'中文测试6z'},{name:'May',to:'中文测试7z'},{name:'June',to:'中文测试8z'},{name:'July',to:'中文测试9z'},{name:'August',to:'中文测试10z'},{name:'September',to:'中文测试11z'},{name:'October',to:'中文测试12z'},{name:'November',to:'中文测试13z'},{name:'December',to:'最后中文测试14'}]

JavaScript code

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

$( "#autocomplete" ).autocomplete( "data.aspx" , {                      minChars: 0,                       max:15,                       width: 200,                      scroll:  false ,                      scrollHeight: 500,                //需要把data转换成json数据格式                parse:  function (data) {              return  $.map(eval(data),  function (row) {                  return  {                      data: row,                      value: row.name,                      result: row.name +  " <"  + row.to +  ">"                  }              });          },              formatItem:  function (data, i, total) {                      return  "<div style='float:left'>" +data.name+data.to+ "</div>"               },               formatMatch:  function (data, i, total) {                          return  data.name;                       },               formatResult:  function (data, value) {                           return  data.name;                      }                  }).result( function (event, data, formatted) {                          $( "#twoColum_abbr" ).val(data.to);                      });

可以了，呵呵 谢谢！