jQuery的自动完成插件autocomplete

autocomplete方法有两个参数，第一个用来填写URL地址或是数据，jQuery Autocomplete插件是支持Ajax方式调用数据，所以可以填写调用的地址，另外可以直接填写数据，格式为JavaScript数组

1、最简单的autocomplete

Java代码  

1. var names = [  
2.                     "Google","NetEase", "Sohu", "Sina", "Sogou", "Baidu", "Tencent",   
3.                     "Taobao", "Tom", "Yahoo", "JavaEye", "Csdn", "Alipay"  
4.                 ];  
5.     //var names = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");                   
6.     $().ready(function(){  
7.         jQuery("#username").autocomplete(names);  
8.     })  

 2、

Java代码  

1. $().ready(function() {  
2.     $("#website").autocomplete(websites,{  
3.         minChars: 0,  
4.         max: 5,  
5.         autoFill: true,  
6.         mustMatch: true,  
7.         matchContains: true,  
8.         scrollHeight: 220,  
9.         formatItem: function(data, i, total) {  
10.             return "<I>"+data[0]+"</I>";  
11.         },  
12.         formatMatch: function(data, i, total) {  
13.             return data[0];  
14.         },  
15.         formatResult: function(data) {  
16.             return data[0];  
17.         }  
18.     });  
19. });  

 在options项我们增加了好几个参数

minChars表示在自动完成激活之前填入的最小字符，这里我们设置为0，在我们双击文本框，不输入字符的时候，就会把数据显示出来，效果如下

max表示下拉框中显示的数据条数，我们设置了5，所以显示5条，也如上图

autoFill表示自动填充，就是在文本框中自动填充符合条件的项目，看下图，在我们输入“g”的时候，文本框里填充了“google”

mustMatch表示必须匹配条目，也就是在文本框里输入的内容，必须是data参数里的数据，如果不匹配，文本框就被清空

matchContains表示包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示，比如在上面的图中，我们输入了“g”，由于“Sogou”中也包含一个“g”，所以会显示出来，如果将matchContains设为fasle，则“Sogou”就不会显示。

后面3个参数formatItem、formatMatch、formatResult非常有用，formatItem作用在于可以格式化列表中的条目，比如我们加了“I”，让列表里的字显示出了斜体，其代表的是显示的格式；formatMatch是配合formatItem使用，表示匹配的内容,表示用户输入的内容在哪些数据项里面搜索；formatResult是定义最终返回的数据，比如我们还是要返回原始数据，而不是formatItem过的数据。

[options]里还有很多有用的参数，大家可以看它的文档。

jQuery Autocomplete插件里还有两个重要的方法，一个是result( handler )，一个是search( )，比如用户在选定了某个条目时需要触发一些别的方法时，着两个方法就可以起作用了，我们再修改以上的例子

Java代码  

1. $().ready(function() {  
2.    
3.     function findValueCallback(event, data, formatted) {  
4.         $("#content").html("<strong>"+(!data ? "No match!" : "Selected: " + formatted)+"</strong>");  
5.     }  
6. //data 选中的行json对象. formatted是formatMatch返回的值.   
7.     $("#website").autocomplete(websites,{  
8.         minChars: 0,  
9.         max: 5,  
10.         autoFill: true,  
11.         mustMatch: true,  
12.         matchContains: true,  
13.         scrollHeight: 220,  
14.         formatItem: function(data, i, total) {  
15.             return "<I>"+data[0]+"</I>";  
16.         },  
17.         formatMatch: function(data, i, total) {  
18.             return data[0];  
19.         },  
20.         formatResult: function(data) {  
21.             return data[0];  
22.         }  
23.     });  
24.     $("#website").result(findValueCallback);  
25.     $("#getvalue").click(function() {$("#website").search()});  

 

1、在使用远程地址时，它默认传入的参数是：q（输入值），limit（返回结果的最大值），可以使用extraParams传入其他的参数
    后台可使用request.getParameter("q") 获取输入的值(未完成的值如tianj)
    要提供更多的参数，通常是使用一个键值对对象.如果传过去的值是{ bar:4 },将会被autocompleter解析成?q=tianj&bar=4 (假设当前用户输入了tianj)

2、autocomplete在使用ajax传递参数时，默认使用了get方式传递，也实在是没有找到可以通过参数提交post方式的办法。
解决方式1：在使用ajax的get方式传递中文时，使用new String(request.getParameter("q").getBytes("iso8859-1"),"utf-8")获得参数值

解决方式2：修改jquery.autocomplete.js代码，把get方式修改为post方式，然后参见之前ajax解决中文乱码的问题的

参数parse的使用：

Java代码  

1. jQuery("#hotelName").autocomplete("<%=basePath%>autocomplete.do?method=suggestHotel", {  
2.                 extraParams:{citycode:function(){return jQuery('#citycodehidden').val();},  
3.                              codeType:function(){return jQuery('#destinationType').val();}},  
4.                 minChars: 3,  
5.                 matchSubset: false,  
6.                 max: 20,  
7.                 width: 310,  
8.                 matchContains: true,  
9.                 autoFill: false,  
10.                 dataType: 'json',  
11.                 scrollHeight: 200,   
12. //加入对返回的json对象进行解析函数，parse函数返回一个数组   
13.                 parse: function(data) {  
14.                     var rows = [];  
15.                     for(var i=0; i<data.length; i++){    
16.                         rows[rows.length] = {    
17.                             data:data[i],              //下拉框显示数据格式   
18.                             value:data[i].hotelid,     //选定后实际数据格式  
19.                             result:data[i].hotelname   //选定后输入框显示数据格式  
20.                         };  
21.                     }  
22.                     return rows;  
23.                 },  
24.                 formatItem: function(row, i, n) {     
25.                     return row;           
26.                 }                 
27.             }).result(function(event, data, formatted) {//如选择后给其他控件赋值，触发别的事件等等  
28.                 $('hotelId').value = formatted;  
29.             });  

http://5uecs.com/2010/0317/xOMDAwMDAwMDExOA.htm

http://www.cnblogs.com/askew/archive/2010/01/18/1650703.html

http://i.laoer.com/tag/javascript

 

Java代码  

1. parse: function(data) {    
2.             return $.map(eval(data), function(row) {    
3.                 return {    
4.                     data: row,    
5.                     value: row.name,    
6.                     result: row.name + " <" + row.to + ">"    
7.                 }    
8.             });    
9.         },  

 jQuery.map(array, callback)
将一个数组中的元素转换到另一个数组中。返回一个数组

Java代码  

1. $.map( [0,1,2], function(n){  
2.   return n + 4;  
3. });  

 将原数组中每个元素加 4 转换为一个新数组。
结果：[4, 5, 6]