php + jQuery自动完成插件autocompleter
autocompleter是一个简单的，容易的，可定制的自动完成功能插件，支持缓存。
1、引用脚本
<script type="text/javascript" src="./jquery-1.10.2.min.js"></script> <script type="text/javascript" src="./jquery.autocompleter.js"></script>
2、添加样式
/**
* 自动提示样式 Simplecomplete
*/
.autocompleter {
width: 100%;
background: #E1E7ED;
top: 35px;
left: 0;
z-index: 100;
border-radius: 5px;
}
.autocompleter,
.autocompleter-hint {
position: absolute;
}
.autocompleter-list {
box-shadow: inset 0px 0px 6px rgba(0,0,0,0.1);
list-style: none;
text-align: left;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 9px;
}
.autocompleter-list>li {
padding-left:19px;
line-height: 38px;
border-radius: 9px;
}
.autocompleter-item-selected {
background: #ffffff;
}
.autocompleter-item {
padding: 6px 12px;
color: #444444;
font-size: 15px;
cursor: pointer;
}
.autocompleter-item:hover {
background: grey;
}
.autocompleter-item strong {
background: #f9de8f;
text-shadow: 0 1px 0 #ffffff;
}
.autocompleter-item span {
color: #bbbbbb;
}
.autocompleter-hint {
color: #ccc;
text-align: left;
top: -56px;
font-weight: 400;
left: 0;
width: 100%;
padding: 12px 12px 12px 13px;
font-size: 24px;
display: none;
}
.autocompleter-hint span {
color: transparent;
}
.autocompleter-hint-show {
display: block;
}
.autocompleter-closed {
display: none;
}也可以引用 jquery.autocompleter.css ，作相应处理；
3、定义你的autocompleter：
$(function () {
$('input').autocompleter({ source: 'path/to/get_data_request' });
});或用于本地JSON来源：
var data = [
{ "value": "1", "label": "one" },
{ "value": "2", "label": "two" },
{ "value": "3", "label": "three" }
];
$(function () {
$('input').autocompleter({ source: data });
});4、完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>冷暖自知一抹茶ck</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="./css/global.css">
<script type="text/javascript" src="./jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./jquery.autocompleter.js"></script>
</head>
<body>
<div class="nav">
123456789
</div>
<div class="search">
<div class="search_text" >
<input />
<button >
<i class="fa fa-search"></i>
</button>
</div>
</div>
<script>
$(function () {
$('#searchtxt').autocompleter({
highlightMatches: true, // marker for autocomplete matches
source: "server.php", // object to local or url to remote search
template: '{{ label }} <span>({{ id }})</span>', // custom template
//template: '<span >{{ label }}</span>',
empty: false, // abort source if empty field[如果数据为空,阻止检索]
limit: 10, // max results[最多查询显示条数]
cache: true,
callback: function (value, index, selected) {
if (selected) {
//$('.icon').css('background-color', selected.hex);
$('#searchtxt').attr("data-value",selected.id);
}
}
});
$("#seobut").click(function() {
var seo = $("#searchtxt").val();
if (seo.length > 1) {
window.location.href = "search?seo=" + seo;
}
});
$('#searchtxt').bind('keypress',
function(event) {
if (event.keyCode == "13") {
var seo = $("#searchtxt").val();
if (seo.length > 1) {
window.location.href = "search?seo=" + seo;
}
}
});
});
</script>
<div class="container" >
<div >
<div >
<div >123456</div>
<div >789456</div>
</div>
<div >
<div >123456</div>
<div >789456</div>
</div>
<div ></div>
</div>
</div>
<div >
<p>冷暖自知一抹茶ck</p>
</div>
</body>
</html>参考资料：https://github.com/ArtemFitiskin/jquery-autocompleter
打包文件：链接：http://pan.baidu.com/s/1o8Ivgtc 密码：ivc7
- 上一篇 »php插件功能实现方法介绍
- 下一篇 »sublime 3 增加php开发插件