`
uule
  • 浏览: 6358304 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

jQuery的自动完成插件autocomplete

阅读更多

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

1、最简单的autocomplete


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

 2、

$().ready(function() {
	$("#website").autocomplete(websites,{
		minChars: 0,
		max: 5,
		autoFill: true,
		mustMatch: true,
		matchContains: true,
		scrollHeight: 220,
		formatItem: function(data, i, total) {
			return "<I>"+data[0]+"</I>";
		},
		formatMatch: function(data, i, total) {
			return data[0];
		},
		formatResult: function(data) {
			return data[0];
		}
	});
});

 在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( ),比如用户在选定了某个条目时需要触发一些别的方法时,着两个方法就可以起作用了,我们再修改以上的例子

$().ready(function() {
 
  	function findValueCallback(event, data, formatted) {
		$("#content").html("<strong>"+(!data ? "No match!" : "Selected: " + formatted)+"</strong>");
	}
//data 选中的行json对象. formatted是formatMatch返回的值. 
	$("#website").autocomplete(websites,{
		minChars: 0,
		max: 5,
		autoFill: true,
		mustMatch: true,
		matchContains: true,
		scrollHeight: 220,
		formatItem: function(data, i, total) {
			return "<I>"+data[0]+"</I>";
		},
		formatMatch: function(data, i, total) {
			return data[0];
		},
		formatResult: function(data) {
			return data[0];
		}
	});
	$("#website").result(findValueCallback);
	$("#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的使用:

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

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才不缓存,他奶奶个熊的,让个试了好久!

 

 

 parse: function(data) {  
             return $.map(eval(data), function(row) {  
                 return {  
                     data: row,  
                     value: row.name,  
                     result: row.name + " <" + row.to + ">"  
                 }  
             });  
         },

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

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

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

  • 大小: 36.2 KB
  • 大小: 30.9 KB
  • 大小: 1.7 KB
分享到:
评论
4 楼 autosuggestion 2017-06-23  
实现一个智能提示功能需要JavaScript、ajax、数据库、jsp/php很多知识,
如果数据量大还需要特殊优化,一个小功能,花费太大精力不合适

但这是个可有可无的功能吗,肯定不是
对用户而言,可以有效降低输入成本,在面对输入框时,获得更多提示,不用那么迷茫和无助
对站长而言,可以优先推送网站的关键信息,等于多了一个广告位。

一所大学图书馆的搜索框智能提示,大约50万个词条(书名)
他们使用的是www.92find.com的搜索框智能提示免费产品,
只要一行javascript代码,就可以实现baidu、淘宝搜索框提示的全部功能
比如:拼音匹配、拼音前缀匹配、模糊搜索、智能容错,
还可以自定义提示词汇及其排序权重
你只需要准备好自己的提示词汇表就可以了,
无需编写程序,
五分钟(真的是5分钟)就可以在线配置拥有
主流搜索引擎都有的自动提示(自动补全)功能
3 楼 autosuggestion 2017-06-23  
这个例子是 92find.com的 211 985 高校客户案例
2 楼 autosuggestion 2017-06-23  
1 楼 autosuggestion 2017-06-23  
搜索框对一个网站信息传送非常重要,简直就是个跨空间的传送门!
可是一个孤零零、没有提示的搜索框,反而给用户带来无助感:很多时候用户不知道要输入些什么
为什么不能像baidu、淘宝、google那样,给搜索框添加一个自动提示(自动补全)功能呢,
对用户而言,可以有效降低输入成本,获得更多提示,快速了解网站的优质资源
对站长而言,可以优先推送网站的优质关键信息,等于多了一个广告位,更多的展示网站优先推荐的内容。
最近做了一个搜索项目,
发现很多用户会偷懒,直接输入拼音、拼音首字母、某个词汇去进行搜索,
在此情况下,
为网站的搜索框安装一个类似百度、google那样的搜索提示、补全功能。
要求系统能快速响应用户的搜索需求;
同时还发现,不同的用户对同一个词条(标题)的提示排序顺序,有不同要求,
比如输入jd,高校图书馆用户希望《基督山伯爵》排在前面,《京东疯狂大减价》(我YY的)排在后面,
如果是电商,正好相反,对电商而言,不同销售季节,希望搜索提示出词条的排序也是不同的。
我发现在网上找个关于搜索框(input标签)自动提示的JS插件很容易,一大堆供你挑选,
但是,要想实现拼音、拼音首字母匹配、模糊匹配、智能容错、自定义提示词条自主排序等等这些功能,
是非常琐碎非常麻烦的,
更麻烦的是,我的数据在50万条左右,要想前端用户输入之后有较快(延时小于100ms)的响应,
还需要在前端加一层cache,memocache 、redis试了个遍。
网上的智能提示JS插件,都仅仅是一个前端界面,要实现自动提示,最大困难的是后端实现
92find做一个这样的JS插件:
把前面提到那些功能都封装起来,放在一台云服务器上,
开发者每次需要使用自动提示这个功能时,
只需准备好要提示的词条列表或者标题列表,及其排序的优先级,
向云服务器提交这些数据,服务自动生成前面提到的各种索引(前缀、拼音、容错),
并且自动分发到一个cache中,
开发者只需在自己的H5页面(或者普通HTML页面)中引用一行JS代码,
就可以通过跨域的方式使用自动提示的数据了,
不再需要配置什么数据库,也不需要写一行后台的java/php代码
只需5分钟 和一个txt文本,
自己的搜索框提示功能就上线了,同baidu、淘宝一样强大。
我把这个功能安装在了国内几家211、985大学的网站上
项目网站www.92find.com

相关推荐

    jQuery自动完成插件autocomplete.zip

    在标题"jQuery自动完成插件autocomplete.zip"中,我们了解到这是一个基于jQuery库的插件,主要功能是实现自动完成效果。描述中提到的zip文件包含的是该插件的核心组件。 jQuery库是JavaScript的一个轻量级框架,它...

    jQuery plugin for autocomplete - jQuery自动完成插件

    jQuery plugin for autocomplete - jQuery自动完成插件

    autocomplete, jQuery自动完成插件,如Google自动完成.zip

    autocomplete, jQuery自动完成插件,如Google自动完成 电子邮件自动完成文档&演示插件jQuery自动完成插件如谷歌搜索 npm install jquery-autocomplete

    jquery自动完成autocomplete,兼容各浏览器,支持中文

    **jQuery自动完成插件Autocomplete** jQuery的Autocomplete插件是一种强大的交互功能,它允许用户在输入时获得建议或预填充的搜索项。这个插件是基于jQuery库的,因此可以轻松地集成到任何HTML页面中,以提高用户...

    jquery 自动完成 Autocomplete

    **jQuery自动完成(Autocomplete)** jQuery的自动完成插件是一种强大的交互功能,它允许用户在输入文本时根据已有的数据集快速选择合适的选项。这个功能常见于搜索框、表单填充等场景,极大地提高了用户体验。在本篇...

    jquery的autocomplete(自动补全)插件

    **jQuery的Autocomplete插件**是用于实现网页输入框自动补全功能的一种高效解决方案,它极大地提升了用户体验,尤其是在用户需要从大量数据中选择时。这个插件是基于jQuery库的,因此,首先需要确保在项目中引入了...

    这是一款轻量级的jquery自动完成插件

    **jQuery自动完成插件概述** jQuery自动完成插件是一种便捷的前端开发工具,它极大地提升了用户体验,特别是当用户需要在输入框中输入特定数据时。这款轻量级的jQuery插件设计精巧,旨在帮助用户快速找到并选择匹配...

    jquery自动完成.autocomplete

    在本文中,我们将深入探讨如何使用jQuery的Autocomplete插件来实现一个动态的、基于Ajax的自动完成功能。这个功能常用于输入框,当用户输入时,它会根据已有的数据提供匹配的建议,极大地提高了用户体验。我们将讨论...

    jquery自动完成表插件Autocomplete Table

    Autocomplete Table是一个jQuery插件,提供自动完成下拉的多列表,(下拉)字段列表。浏览器要求ie9以上版本,演示地址:http://www.jq22.com/jquery-info529

    jquery autocomplete 自动完成 插件

    jQuery Autocomplete插件是jQuery UI库中的一个组件,它提供了搜索框自动补全的功能,极大地提高了用户输入数据的效率和用户体验。这个插件基于jQuery框架,使得在网页中实现智能搜索和建议输入变得简单易行。 ### ...

    jquery自动补全插件(jquery autocomplete)

    jQuery AutoComplete 是一个非常流行的前端插件,它为输入框提供了自动补全的功能,极大地提升了用户在网页上的输入体验。这个插件基于 jQuery 库,因此,使用前需要先引入 jQuery。AutoComplete 的主要功能是根据...

    jquery自动完成插件

    **jQuery自动完成插件**是一种常用的前端开发工具,它能够为网页中的输入框提供自动补全功能,类似于搜索引擎的搜索建议。这种插件极大地提升了用户体验,减少了用户输入内容的时间,提高了交互效率。在网页设计中,...

    jquery自动完成插件收集集合

    **jQuery自动完成插件概述** 在网页开发中,jQuery自动完成插件是一种常见的交互功能,它为用户输入提供即时建议,提升用户体验。这些插件通常用于搜索框、表单输入等场景,帮助用户快速找到他们想要的信息或输入...

    jQuery文本框联想补全自动完成插件

    jQuery文本框联想补全自动完成插件是一款非常实用的前端开发工具,它可以帮助开发者在网页的输入框中实现智能联想和自动补全功能。这个插件基于JavaScript库jQuery构建,因此,使用它之前需要确保项目中已经引入了...

    jQuery Autocomplete自动完成插件

    jQuery Autocomplete 自动完成插件是一项广泛应用于Web开发中的jQuery插件,它能够帮助开发者快速地为文本输入框增加自动完成的功能。该插件通过向服务器发送异步请求,根据用户输入的内容提供一个下拉列表,该列表...

    JQUERY 自动完成autocomplete

    **jQuery 自动完成 Autocomplete 知识点详解** jQuery 的 Autocomplete 是一个强大的插件,它为用户在输入框中输入内容时提供实时的建议或匹配项,极大地提高了用户体验。这个功能广泛应用于搜索框、表单填充等场景...

    jquery文本框自动补全ajax autocomplete 完整实例

    在本文中,我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能,以及相关的`autocomplete`插件的完整实例。这个功能在许多Web应用程序中非常常见,它能够提高用户输入的效率和用户体验。 首先,让...

    jquery-autocomplete 自动填充插件参数使用说明

    总结,jQuery UI Autocomplete插件是一个强大且灵活的工具,能够帮助开发者快速实现自动填充功能。通过理解并巧妙运用其提供的参数,可以定制出满足各种需求的搜索体验,从而提升网站或应用的用户体验。无论是在小型...

Global site tag (gtag.js) - Google Analytics