欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

jQuery的自动完成插件autocomplete

shiping1 的头像

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

 

 

 

cacheLength (Number):

    缓存的长度.即对从数据库中取到的结果集要缓存多少条记录.设成0为不缓存.Default: 10

注意是设置为0才不缓存,网上都说是设为1才不缓存,他奶奶个熊的,让个试了好久!

 

 

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]

来自  http://uule.iteye.com/blog/1046973


优秀的 jQuery 文本输入框自动完成 & 自动提示插件

 

  文框输入框的自动完成和自动提示功能可以帮助用户快速的完成操作,是非常好的产品使用体验。这里向大家推荐一款优秀的 jQuery 文本输入框自动完成 & 自动提示插件,帮助你在网站中轻松添加输入框的自动完成和自动提示功能。

您可能感兴趣的相关文章

 

  在这篇文章中,我们使用 jQuery 实现智能输入框光标的位置。它不需要图像,是使用纯粹的 CSS3 实现的,而且实时、准确,这意味着你在添加或删除文本的时候它会自动适应。使用事件代理机制实现,所以不用担心性能问题。

下载源码    在线演示

  

  主要参数介绍:

  • serviceUrl:Ajax 请求的 URL;
  • lookup:本地数据数组;
  • minChars:触发自动提示的最小字符数;
  • params:请求的附加参数;
  • formatResult:返回结果的格式化函数;
  • autoSelectFirst:是否自动选中第一个;
  • onSearchStart:搜索开始的回调函数;
  • onSearchComplete:搜索完成的回调函数;
  • tabDisabled:是否禁用 Tab 键;

 

使用方法

  这个差距的使用非常简单,下面是 HTML、CSS 和 JavaScript 示例代码。

  HTML 代码:

1
<input type="text" name="country" id="autocomplete"/>

  CSS 代码:

1
2
3
4
.autocomplete-suggestions { border1px solid #999background#FFFoverflowauto; }
.autocomplete-suggestion { padding2px 5pxwhite-spacenowrapoverflowhidden; }
.autocomplete-selected { background#F0F0F0; }
.autocomplete-suggestions strong { font-weightnormalcolor#3399FF; }

  Ajax 查找模式:

1
2
3
4
5
6
$('#autocomplete').autocomplete({
    serviceUrl: '/autocomplete/countries',
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});

  本地查找模式:

1
2
3
4
5
6
7
8
9
10
11
12
var countries = [
   { value: 'Andorra', data: 'AD' },
   // ...
   { value: 'Zimbabwe', data: 'ZZ' }
];
 
$('#autocomplete').autocomplete({
    lookup: countries,
    onSelect: function (suggestion) {
        alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
    }
});

来自  http://www.cnblogs.com/lhb25/archive/2013/01/28/jquery-auto-complete-auto-suggest-text-input.html
普通分类: