【修正版】jquery-autocomplete搜索关键字自动补全效果

最新推荐文章于 2022-09-12 16:07:22 发布

radio123

最新推荐文章于 2022-09-12 16:07:22 发布

阅读量234

点赞数

分类专栏： js 文章标签： xhtml javascript ui ViewUI

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

【修正版】jquery-autocomplete搜索关键字自动补全效果

首先说一下jquery-autocomplete 与 jquery ui autocomplete 是不一样，我看到网上很多人贴的地址都混淆了，我在这贴一下正确的插件地址

插件首页:

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

插件文档:

http://docs.jquery.com/Plugins/Autocomplete

配置说明:

http://docs.jquery.com/Plugins/Autocomplete/autocomplete#toptions

其次，这个插件在搜索中文时是有bug的，我在转载的一篇文章中也提到过，里面有修改的方法，但是不完善，参考了很多网友的帖子，终于知道了正确的修改方法，在 jquery.autocomplete.js 第200行添加几行代码

.bind("unautocomplete", function() {
		select.unbind();
		$input.unbind();
		$(input.form).unbind(".autocomplete");
	})；

将其变为

.bind("unautocomplete", function() {
		select.unbind();
		$input.unbind();
		$(input.form).unbind(".autocomplete");
	}).bind("input", function() { 
		onChange(0, true); 
	});

修改好的文件我已经测试过，完全支持各大浏览器，包括中英文的提示都可以。我在附件里有正确的js文件，有需要的可以直接下载。

先写一个简单的demo

<!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>无标题文档</title>

<link rel="stylesheet" href="jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>

<script type="text/javascript">  
var datas = [  
    "Google","NetEase", "Sohu", "Sina", "Sogou", "我爱北京", "我爱你","Tencent",   
    "Taobao", "Tom", "Yahoo", "JavaEye", "Csdn", "Alipay" ,"abc" 
];  
$().ready(function() {  
    $("#datas").autocomplete(datas,{  
           max: 12,    //列表里的条目数
		   width: 400,     //提示的宽度，溢出隐藏
		   scrollHeight: 120,   //提示的高度，溢出显示滚动条
		   matchContains: false,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
		   autoFill: false    //是否自动填充
    });   
});  
</script> 
</head>

<body>
<p>  
<label>自动提示:</label>  
<input type="text" id="datas" />  
</p>  



</body>
</html>

下面就是效果图，大家可以下载下来试试效果。