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

radio123

浏览: 205682 次
性别:
来自: 北京

最近访客更多访客>>

wuhenjia

wang_eye

suan2046

人帅是非多

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

【修正版】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>

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

jquery-autocomplete-demo.zip (37.1 KB)
下载次数: 310

查看图片附件

2
顶

0
踩

分享到：

【转】编译zeromq的java绑定：jzmq | 【转】 Apache Log4j配置说明

2013-01-07 19:46
浏览 9376
评论(1)
分类:Web前端
查看更多

1 楼 panghaoyu 2017-03-14

实现一个智能提示功能需要ajax、数据库、jsp/php、算法等很多知识，
如果数据量大，还需要特殊优化
一个小功能，花费太大精力很不划算
我使用了92find.c-o-m的搜索框智能提示功能托管服务，
只要一行javascript代码就可以实现百度、淘宝搜索框提示的全部功能
比如：汉字拼音匹配、拼音前缀匹配、模糊搜索、智能容错，还可以自定义提示词汇及其排序权重
花五分钟我的网站就可以部署同百度、淘宝一样强大好用的输入提示功能
同时兼容IE、Firefox、Safari、Chrome、Opera各种浏览器
兼容ios、Android、Windows

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论