Home > Developer > JavaScript
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> keyword match search imitation Baidu </title>
<Meta name = "description" content = "the content cannot exceed 100 Chinese characters">
<Meta name = "keywords" content = "3-5 content-related keywords">
<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: pixel; 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"> keyword match search </span>
<Input type = "text" class = "input_search_key" id = "gover_search_key" placeholder = "enter a keyword to search"/>
<Button type = "submit" class = "search_btn"> Search </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 in 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 the request to the backend for query based on the keyword
Var sendKeyWord = function (event ){
// Select the drop-down list for the keyboard
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: la ');
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;
}
}
// Execute data display after the request is returned
This. dataDisplay = function (data ){
If (data. length <= 0 ){
SuggestWrap. hide ();
Return;
}
// Add and display entries in the recommended drop-down box in the search box
Var li;
Var tmpFrag = document. createDocumentFragment ();
Suggestwrap.find('ul'hangzhou.html ('');
For (var I = 0; I <data. length; I ++ ){
Li = document. createElement ('lil ');
Li. innerHTML = data [I];
TmpFrag. appendChild (li );
}
SuggestWrap. find ('ul '). append (tmpFrag );
SuggestWrap. show ();
// Bind a mouse event to the drop-down list
SuggestWrap. find ('lil'). hover (function (){
SuggestWrap. find ('lil'). removeClass ('hover ');
$ (This). addClass ('hover ');
}, Function (){
$ (This). removeClass ('hover ');
}). Bind ('click', function (){
$ (This). find ("span"). remove ();
Input. val (this. innerHTML );
SuggestWrap. hide ();
});
}
Init ();
};
// Instantiate the input prompt JS. The parameter is the name of the function to be called during the query operation.
Var searchSuggest = new oSearchSuggest (sendKeyWordToBack );
// This is a similar function. It sends an ajax query request to the backend, returns a query result data, passes it to the front-end JS, and then displays the data by the front-end JS. This function is a query request modified by a programmer.
// The parameter is a string that 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 the simulation result code returned based on input. The actual data is returned by 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 result code returned based on input. The actual data is returned by the background.
Var aData = [];
AData. push ('<span class = "num_right"> about 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 50000 </span>' + keyword + 'Return data 4 ');
AData. push ('<span class = "num_right"> about 1044 </span>' + keyword + '2017 is true ');
AData. push ('<span class = "num_right"> about 100 </span>' + keyword + '100 is false ');
AData. push ('<span class = "num_right"> about 100 </span>' + keyword + '2017 is true ');
AData. push ('<span class = "num_right"> about 100 </span>' + keyword + '100 is false ');
// Pass the returned data to the input prompt js class that implements the search input box
SearchSuggest. dataDisplay (aData );
}
</Script>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
