Baidu-like keyword matching search example

Home

Web Front-end

JS Tutorial

Baidu-like keyword matching search example_jquery

May 16, 2016 pm 05:21 PM

Key words

Copy code The code is as follows:

 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>关键词匹配搜索仿百度</title> 
<meta name="description" content=" 内容介绍不超过100个中文"> 
<meta name="keywords" content=" 内容相关关键词3-5个"> 
<style> 
body, ul, li { margin: 0; padding: 0;} 
body{ font-size:12px; font-family:sumsun,arial;background:#FFFFFF;} 
.gover_search{ position:relative; z-index:99; height:63px; padding:15px 0 0 20px; border:1px solid #b8cfe6; border-bottom:0; background:url(../images/gover_search_bg.gif) repeat-x 0 0;} 
.gover_search_form{height:36px;} 
.gover_search .search_t{ float:left; width:112px; line-height:26px; color:#666;} 
.gover_search .input_search_key{ float:left; width:462px; height:18px; padding:3px; margin-right:5px; border:1px solid #ccc; line-height:18px; background:#fff;} 
.gover_search .search_btn{ float:left; width:68px; height:26px; overflow:hidden; border:1px solid #ccc; text-align:center; color:#ff3300; letter-spacing:5px; background:url(../images/gover_search_bg.gif) no-repeat 0 -79px; cursor:pointer; font-weight:bold;} 
.gover_search .search_suggest{ position:absolute; z-index:999; left:132px; top:41px; width:468px; border:1px solid #ccc;border-top:none; display:none;color:#004080; } 
.gover_search .search_suggest li{height:24px; overflow:hidden; padding-left:3px; line-height:24px; background:#fff; cursor:default;} 
.gover_search .search_suggest li.hover{background:#ddd;} 
.num_right{float:right;text-align:right;line-height:24px;padding-right:10px} 
</style> 
</head> 

<body> 

<div class="gover_search"> 
<div class="gover_search_form clearfix"> 
<span class="search_t">关键词匹配搜索</span> 
<input type="text" class="input_search_key" id="gover_search_key" placeholder="请输入关键词直接搜索" /> 
<button type="submit" class="search_btn">搜索</button> 
<div class="search_suggest" id="gov_search_suggest"> 
<ul> 
</ul> 
</div> 
</div> 
</div> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> 

<script type ="text/javascript"> 

//Implement the input prompt js class of the search input box
function oSearchSuggest(searchFuc){ 
var input = $('#gover_search_key'); 
var suggestWrap = $('#gov_search_suggest'); 
var key = ""; 
var init = function(){ 
input.bind('keyup',sendKeyWord); 
input. bind('blur',function(){setTimeout(hideSuggest,100);}) 
} 
var hideSuggest = function(){ 
suggestWrap.hide(); 
} 

//Send a request and query the background based on keywords
var sendKeyWord = function(event){ 

//Keyboard selection drop-down item
if(suggestWrap.css('display')= ='block'&&event.keyCode == 38||event.keyCode == 40){ 
var current = suggestWrap.find('li.hover'); 
if(event.keyCode == 38){ 
if(current.length>0){ 
var prevLi = current.removeClass('hover').prev(); 
if(prevLi.length>0){ 
prevLi.addClass( 'hover'); 
input.val(prevLi.html()); 
} 
}else{ 
var last = suggestWrap.find('li:last'); 
last .addClass('hover'); 
input.val(last.html()); 
} 

}else if(event.keyCode == 40){ 
if(current .length>0){ 
var nextLi = current.removeClass('hover').next(); 
if(nextLi.length>0){ 
nextLi.addClass('hover'); 
input.val(nextLi.html()); 
} 
}else{ 
var first = suggestWrap.find('li:first'); 
first.addClass('hover' ); 
input.val(first.html()); 
} 
} 

//Input characters 
}else{ 
var valText = $.trim( input.val()); 
if(valText ==''||valText==key){ 
return; 
} 
searchFuc(valText); 
key = valText; 
} 

} 
//After the request returns, perform data display 
this.dataDisplay = function(data){ 
if(data.length<=0){ 
 suggestWrap.hide(); 
return; 
} 

//Add entries to the search box drop-down suggestion display bar and display 
var li; 
var tmpFrag = document.createDocumentFragment (); 
suggestWrap.find('ul').html(''); 
for(var i=0; i<data.length; i ){ 
li = document.createElement(' LI'); 
li.innerHTML = data[i]; 
tmpFrag.appendChild(li); 
} 
suggestWrap.find('ul').append(tmpFrag); 
 suggestWrap.show(); 

//Bind mouse events for drop-down options 
suggestWrap.find('li').hover(function(){ 
suggestWrap.find('li') .removeClass('hover'); 
$(this).addClass('hover'); 

},function(){ 
$(this).removeClass('hover'); 
}).bind('click',function(){ 
$(this).find("span").remove(); 
input.val(this.innerHTML); 
 suggestWrap.hide(); 
}); 
} 
init(); 
}; 

//JS that instantiates the input prompt, and the parameters are required when performing query operations Called function name 
var searchSuggest = new oSearchSuggest(sendKeyWordToBack); 

//This is a mock function that sends an ajax query request to the background and returns a query result data, which is passed to the front desk JS, and then the front-end JS displays the data. This function is modified by the programmer to implement the query request
//The parameter is a string, which is the current content in the search input box
function sendKeyWordToBack(keyword){ 
/* var obj = { 
"keyword" : keyword 
}; 
$.ajax({ 
type: "POST", 
url: "${ctx}/front/suqiu2/search/prompt-keyword.action ", 
async:false, 
data: obj, 
dataType: "json", 
success: function(data){ 
//var json = eval("(" data " )"); 
var key=data.split(","); 
var aData = []; 
for(var i=0;i<key.length;i ){ 
 //The following is a simulation effect code that returns search results based on input. The actual data is returned from the background 
if(key[i]!=""){ 
aData.push(key[i]); 
 } 
} 
//Pass the returned data to the input prompt js class that implements the search input box 
searchSuggest.dataDisplay(aData); 
} 
}); */ 
 
//The following is the simulation effect code for returning search results based on input. The actual data is returned from the background. 
var aData = []; 
aData.push('<span class="num_right"> approx. 100</span>' keyword 'return data 1'); 
aData.push('<span class="num_right">about 200</span>' keyword 'return data 2') ; 
aData.push('<span class="num_right">About 100</span>' keyword 'return data 3'); 
aData.push('<span class=" num_right">About 50,000</span>' keyword 'Return data 4'); 
aData.push('<span class="num_right">About 1044</span>' keyword ' 2012 is true'); 
aData.push('<span class="num_right">about 100</span>' keyword '2012 is false'); 
aData.push( '<span class="num_right">about 100</span>' keyword '2012 is true'); 
aData.push('<span class="num_right">about 100 </span>' keyword '2012 is false'); 
 // Pass the returned data to the js class that implements the input prompt of the search input box 
searchSuggest.dataDisplay(aData); 
} 
</script> 
</body> 
</html> 

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn