源码来源自网络,我修改成es版的。
效果就是,把要搜索的内容先返回给用户,然后用户挑选要搜索的内容,达到精确查找。
demo.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style type="text/css">
/* 搜索框 */
*{margin:0;padding:0;list-style-type:none;}
.demo{width:720px;margin:30px auto;}
.demo h2{font-size:16px;color:#3366cc;height:30px;}
.demo li{float:left;}
.text{width:529px;height:22px;padding:4px 7px;padding:6px 7px 2px\9;font:16px arial;border:1px solid #cdcdcd;border-color:#9a9a9a #cdcdcd #cdcdcd #9a9a9a;vertical-align:top;outline:none;margin:0 5px 0 0;}
/* 弹出的 */
.bigautocomplete-layout{display:none;background-color:#FFFFFF;border:1px solid #BCBCBC;position:absolute;z-index:100;max-height:220px;overflow-x:hidden;overflow-y:auto; }
.bigautocomplete-layout table{border-collapse:collapse;border-spacing:0;background:none repeat scroll 0 0 #FFFFFF;width:100%;cursor:default;}
.bigautocomplete-layout table tr{background:none repeat scroll 0 0 #FFFFFF;}
.bigautocomplete-layout .ct{background:none repeat scroll 0 0 #D2DEE8 !important;}
.bigautocomplete-layout div{word-wrap:break-word;word-break:break-all;padding:1px 5px;}
</style>
<div class="demo">
<form action="#" method="post" name="searchform" id="searchform" class="searchinfo">
<ul>
<li><input type="text" id="tt" class="text" /></li>
<li><input type="submit" value="搜索" class="button" /></li>
<input type="hidden" value="name" id="fi">
</ul>
</form>
</div>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.bigautocomplete.js"></script>
<script type="text/javascript">
$(function(){
$("#tt").bigAutocomplete({
width:543,
data:[],
url:'http://192.168.247.140:9200/test/test/_search', // 这是地址
param:'name', // 这是要搜索的字段名,改js/jquery.bigautocomplete.js 181行的name换成你要搜索的字段,data.hits.hits[i]._source.字段
callback:function(data){
alert(data.title);
}
});
})
</script>
jquery.bigautocomplete.js
(function($){
var bigAutocomplete = new function(){
this.currentInputText = null;
this.functionalKeyArray = [9,20,13,16,17,18,91,92,93,45,36,33,34,35,37,39,112,113,114,115,116,117,118,119,120,121,122,123,144,19,145,40,38,27];
this.holdText = null;
this.init = function(){
$("body").append("<div id='bigAutocompleteContent' class='bigautocomplete-layout'></div>");
$(document).bind('mousedown',function(event){
var $target = $(event.target);
if((!($target.parents().andSelf().is('#bigAutocompleteContent'))) && (!$target.is(bigAutocomplete.currentInputText))){
bigAutocomplete.hideAutocomplete();
}
})
$("#bigAutocompleteContent").delegate("tr", "mouseover", function() {
$("#bigAutocompleteContent tr").removeClass("ct");
$(this).addClass("ct");
}).delegate("tr", "mouseout", function() {
$("#bigAutocompleteContent tr").removeClass("ct");
});
$("#bigAutocompleteContent").delegate("tr", "click", function() {
bigAutocomplete.currentInputText.val( $(this).find("div:last").html());
var callback_ = bigAutocomplete.currentInputText.data("config").callback;
if($("#bigAutocompleteContent").css("display") != "none" && callback_ && $.isFunction(callback_)){
callback_($(this).data("jsonData"));
}
bigAutocomplete.hideAutocomplete();
})
}
this.autocomplete = function(param){
if($("body").length > 0 && $("#bigAutocompleteContent").length <= 0){
bigAutocomplete.init();
}
var $this = $(this);
var $bigAutocompleteContent = $("#bigAutocompleteContent");
this.config = {
width:$this.outerWidth() - 2,
url:null,
data:null,
callback:null};
$.extend(this.config,param);
$this.data("config",this.config);
$this.keydown(function(event) {
switch (event.keyCode) {
case 40:
if($bigAutocompleteContent.css("display") == "none")return;
var $nextSiblingTr = $bigAutocompleteContent.find(".ct");
if($nextSiblingTr.length <= 0){
$nextSiblingTr = $bigAutocompleteContent.find("tr:first");
}else{
$nextSiblingTr = $nextSiblingTr.next();
}
$bigAutocompleteContent.find("tr").removeClass("ct");
if($nextSiblingTr.length > 0){
$nextSiblingTr.addClass("ct");
$this.val($nextSiblingTr.find("div:last").html());
$bigAutocompleteContent.scrollTop($nextSiblingTr[0].offsetTop - $bigAutocompleteContent.height() + $nextSiblingTr.height() );
}else{
$this.val(bigAutocomplete.holdText);
}
break;
case 38:
if($bigAutocompleteContent.css("display") == "none")return;
var $previousSiblingTr = $bigAutocompleteContent.find(".ct");
if($previousSiblingTr.length <= 0){
$previousSiblingTr = $bigAutocompleteContent.find("tr:last");
}else{
$previousSiblingTr = $previousSiblingTr.prev();
}
$bigAutocompleteContent.find("tr").removeClass("ct");
if($previousSiblingTr.length > 0){
$previousSiblingTr.addClass("ct");
$this.val($previousSiblingTr.find("div:last").html());
$bigAutocompleteContent.scrollTop($previousSiblingTr[0].offsetTop - $bigAutocompleteContent.height() + $previousSiblingTr.height());
}else{
$this.val(bigAutocomplete.holdText);
}
break;
case 27:
bigAutocomplete.hideAutocomplete();
break;
}
});
$this.keyup(function(event) {
var k = event.keyCode;
var ctrl = event.ctrlKey;
var isFunctionalKey = false;
for(var i=0;i<bigAutocomplete.functionalKeyArray.length;i++){
if(k == bigAutocomplete.functionalKeyArray[i]){
isFunctionalKey = true;
break;
}
}
if(!isFunctionalKey && (!ctrl || (ctrl && k == 67) || (ctrl && k == 88)) ){
var config = $this.data("config");
var offset = $this.offset();
$bigAutocompleteContent.width(config.width);
var h = $this.outerHeight() - 1;
$bigAutocompleteContent.css({"top":offset.top + h,"left":offset.left});
var data = config.data;
var url = config.url;
var keyword_ = $.trim($this.val());
if(keyword_ == null || keyword_ == ""){
bigAutocomplete.hideAutocomplete();
return;
}
if(data != null && $.isArray(data) ){
var data_ = new Array();
for(var i=0;i<data.length;i++){
if(data[i].title.indexOf(keyword_) > -1){
data_.push(data[i]);
}
}
makeContAndShow(data_);
}else if(url != null && url != ""){
$.post(url,{keyword:keyword_},function(result){
makeContAndShow(result.data)
},"json")
}
bigAutocomplete.holdText = $this.val();
}
if(k == 13){
var callback_ = $this.data("config").callback;
if($bigAutocompleteContent.css("display") != "none"){
if(callback_ && $.isFunction(callback_)){
callback_($bigAutocompleteContent.find(".ct").data("jsonData"));
}
$bigAutocompleteContent.hide();
}
}
});
// 在这里面处理数据
function makeContAndShow(data_){
var config = $this.data("config"); // 这里是前端页面$("#tt").bigAutocomplete传过来的
var val = $("#tt").val(); // 这是获取前端页面的输入框的值
var cont = "<table><tbody>"; // 拼接的开头
$.get(config.url, {q:+config.param + val}, function (data) { // 拼接搜索时候要加的 q=
if(data.hits.hits == null || data.hits.hits.length <=0 ){ // 如果没有返回值
return;
}
for(var i=0;i<data.hits.hits.length;i++){
cont += "<tr><td><div>" + data.hits.hits[i]._source.name + "</div></td></tr>" // 拼接的弹出
}
cont += "</tbody></table>"; // 拼接的结尾
$bigAutocompleteContent.html(cont); // 加入内容
$bigAutocompleteContent.show(); // 显示
})
// $bigAutocompleteContent.find("tr").each(function(index){
// $(this).data("jsonData",data_[index]);
// })
}
$this.focus(function(){
bigAutocomplete.currentInputText = $this;
});
}
this.hideAutocomplete = function(){
var $bigAutocompleteContent = $("#bigAutocompleteContent");
if($bigAutocompleteContent.css("display") != "none"){
$bigAutocompleteContent.find("tr").removeClass("ct");
$bigAutocompleteContent.hide();
}
}
};
$.fn.bigAutocomplete = bigAutocomplete.autocomplete;
})(jQuery)
181行那里真的无解。。如果你有认识的前端大佬,问下怎么弄。。就是弄成在demo.html设置好要搜索的字段,不需要改js文件直接就可以用。
jq1.7.2下载,下载完改下文件名。