您的位置：首页 > 其它

[JQ权威指南]搜索插件AutoComplete

2016-11-09 08:40 351 查看

(1)AtuoComplete 为自动填充、展示之意。JQuery中引入该插件之后，用户在使用文本框搜索信息时，使用插件中的autocomplete方法绑定文本框，当在文本框中输入某个字符时，通过该方法中的指定的数据URL，返回相匹配的数据，自动显示在文本框下，提醒用户进行选择。
(2)功能描述：在页面中创建一个文本框，用于输入查询信息。当在文本框中输入字符时，通过autocompelete插件绑定设置好的数组信息，并与文本框中的字符匹配，江匹配后的结果序列化后展示在文本框的底部，为提供用户选择。
(3)实现代码：

<!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>
<title>autocomplete插件</title>
<script type="text/javascript"
src="Jscript/jquery-1.4.2-vsdoc.js">
</script>
<script type="text/javascript"
src="Jscript/jquery-1.4.2.js">
</script>
<script type="text/javascript"
src="Js-7-4/jquery.autocomplete.js">
</script>
<link rel="stylesheet" type="text/css"
href="Css-7-4/jquery.autocomplete.css" />
<style type="text/css">
body{font-size:13px}
.divFrame{width:260px;border:solid 1px #666}
.divFrame .divTitle{padding:5px;background-color:#eee;font-weight:bold}
.divFrame .divContent{padding:8px;line-height:1.6em}
.divFrame .divBtn,#divData{padding-bottom:8px;padding-left:8px}
.txt{border:#666 1px solid;padding:2px;width:150px;margin-right:3px}
.btn {border:#666 1px solid;padding:2px;width:80px;margin-bottom:3px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
</style>
<script type="text/javascript">
$(function() {
var arrUserName = ["张三", "王小五", "张才子",
"李四", "张大三", "李大四", "王五", "刘明",
"李小四", "刘促明", "李渊", "张小三", "王小明"];
$("#txtSearch").autocomplete(arrUserName, {
minChars: 0, //双击空白文本框时显示全部提示数据
formatItem: function(data, i, total) {
return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式
},
formatMatch: function(data, i, total) {
return data[0];
},
formatResult: function(data) {
return data[0];
}
}).result(SearchCallback); //选中匹配数据中的某项数据时，调用插件的result()方法
//自定义返回匹配结果函数
function SearchCallback(event, data, formatted) {
$("#divData").html("您的选择是：" + (!data ? "空" : formatted));
}
//点击"查一下"按钮后，触发插件的search()方法
$("#btnSearch").click(function() {
$("#txtSearch").search();
});
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
搜索用户
</div>
<div class="divContent">
<span style="padding:0 5px 0 10px"><a href="#">新闻</a></span>
<span style="padding:0 5px 0 5px"><b>用户</b></span>
<div>
<input type="text" id="txtSearch" class="txt" />
<input type="button" id="btnSearch" value="查一下" class="btn" />
</div>
</div>
<div id="divData"></div>
</div>
</body>
</html>

(4)页面显示

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

标签：

相关文章推荐

新的分享

章节导航