|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2012-08-09
AutoComplete控件就是在用户在文本框输入前几个字母或是汉字的时候,能从存放数据的文本或是数据库里将所有以这些字母开头的数据提示给用户。
如百度搜索下输入'a'时的提示：
其实我们也可以很方便的实现，autocomplete就是实现该功能的利器：
官网：http://jqueryui.com/demos/autocomplete/
autocomplete需要的数据源可以为：本地数据和远程数据
本地数据源为本地js数组或本地的json对象，如： var data = ["c++","java", "php", "coldfusion","javascript"]; var data = [{text:'Link A', url:'/page1'}, {text:'Link B', url: '/page2'} ];
在使用远程地址时，它默认传入的参数是：q（输入值），limit（返回结果的最大值），可以使用extraParams传入其他的参数，而且远程数据源是需要固定格式的数据，返回结果：使用“\n”分割每行数据，每行数据中使用“|”分割每个元素，如：
string data = "c++\n java \n php \n coldfusion \n javascript";
一个最简单的Autocomplete（自动完成）代码片段：
<!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 websites = [
"Google","NetEase", "Sohu", "Sina", "Sogou", "我爱北京", "Tencent",
"Taobao", "Tom", "Yahoo", "JavaEye", "Csdn", "Alipay"
];
$().ready(function() {
$("#website").autocomplete(websites,{});
});
</script>
</head>
<body>
<p>
<label>Web Site:</label>
<input type="text" id="website" />
<input type="button" id="getvalue" value="Get Value" />
</p>
</body>
</html>
从代码中我们只需在前端引入：
<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> 三行。
然后为指定输入框提供查询数据即可： $("#website").autocomplete(websites,{});
我们还可以根据实际情况添加可选项： $("#website").autocomplete(websites,{ max: 12, //列表里的条目数 width: 400, //提示的宽度，溢出隐藏 scrollHeight: 300, //提示的高度，溢出显示滚动条 matchContains: true, //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示 autoFill: false, //是否自动填充 });
以上参数基本可满足我们的需求了。
另：
附件提供了DEMO，大家可体验下。
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2012-08-09
老东西了。
|
| 返回顶楼 | |
|
发表时间：2012-08-10
很早以前就在用了！
|
| 返回顶楼 | |
|
发表时间：2012-08-11
|
| 返回顶楼 | |
浏览 5274 次
