您的位置：首页 > 其它

autocomplete实现联想输入，自动补全

2015-04-25 16:14 381 查看

jQuery.AutoComplete是一个基于jQuery的自动补全插件。借助于jQuery优秀的跨浏览器特性，可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器。

特性一览：

支持补全列表的宽度设定。

支持补全列表的最大高度设定。

支持补全列表的行数限制。

支持补全列表的显示位置及方向的设定。

支持自定义匹配规则。

支持匹配文本的渲染。

支持自定义匹配文本的渲染样式。

支持补全列表的样式设定。

支持自定义补全列表项的创建。

支持多种数据源。

支持'json'和'xml'两种数据格式。

支持异步处理。

支持错误调试。

支持jQuery1.7.1+。

先看效果图：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery实现仿搜索引擎文本框自动补全插件 - autocomplete</title>

<script src="__PUBLIC__/dwz/js/jquery-1.7.min.js" type="text/javascript"></script>
<script src="__PUBLIC__/autocomplete/jquery.autocomplete.js?v=2"></script>
<link rel="stylesheet" href="__PUBLIC__/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript">
$(function(){

$("#tt").AutoComplete({
'data':'__MODULE__/test/suggestCom2',
});

})
</script>

</head>
<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.demo{width:720px;margin:30px auto;}
.demo h2{font-size:16px;color:#3366cc;height:30px;}
.demo li{float:left;}
.text,.button{background:url(http://su.bdimg.com/static/superpage/img/spis_031ddf34.png) no-repeat;}
.text{width:529px;height:22px;padding:4px 7px;padding:6px 7px 2px\9;font:16px arial;border:1px solid #cdcdcd;border-color:#9a9a9a #cdcdcd #cdcdcd #9a9a9a;vertical-align:top;outline:none;margin:0 5px 0 0;}
.button{width:95px;height:32px;padding:0;padding-top:2px\9;border:0;background-position:0 -35px;background-color:#ddd;cursor:pointer}
</style>

<div class="demo">
<h2>autocomplete联想输入测试</h2>
<form action="" method="post" name="searchform" id="searchform" class="searchinfo">
<ul>
<li><input type="text" id="tt" value="" class="text" /></li>
<li><input type="submit" value="搜索" class="button" /></li>
</ul>
</form>
</div>

</body>
</html>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航