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:;
z-index:;
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:;
left:;
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" style="">
<input id="searchtxt" class="bantxt" name="searchtxt" placeholder="搜索关键字.." style="border: 1px solid rgb(44, 44, 44);" maxlength="60" type="text" />
<button id="seobut" class="btn banbutt" type="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 id="{{ id }}">{{ 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" style="width:100%;height:auto;">
<div style="width:1050px;height:auto;margin:0 auto;">
<div style="width:60%;height:900px;background:yellow;float:left;margin:2%;padding:2% 1%;">
<div style="">123456</div>
<div style="">789456</div>
</div>
<div style="width:26%;height:900px;background:pink;float:right;margin-left:6%;margin:2%;padding:2% 1%">
<div style="">123456</div>
<div style="">789456</div>
</div>
<div style="clear:both;"></div>
</div>
</div> <div style="width:100%;text-align:center;">
<p>冷暖自知一抹茶ck</p>
</div>
</body>
</html>
参考资料：https://github.com/ArtemFitiskin/jquery-autocompleter
打包文件：链接：http://pan.baidu.com/s/1o8Ivgtc 密码：ivc7