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" 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="100%;height:auto;">
<div style="1050px;height:auto;margin:0 auto;">
<div style="60%;height:900px;background:yellow;float:left;margin:2%;padding:2% 1%;">
<div style="">123456</div>
<div style="">789456</div>
</div>
<div style="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="100%;text-align:center;">
<p>冷暖自知一抹茶ck</p>
</div>
</body>
</html>
参考资料：https://github.com/ArtemFitiskin/jquery-autocompleter
打包文件：链接：http://pan.baidu.com/s/1o8Ivgtc 密码：ivc7