Can realize the Keyword association, search box; a collection of Baidu, Google, Sogou, 360, Tencent and many other search
Code for search.html:
<!doctype html>
The code for SEARCH.CSS is as follows:
/*---------------------search box Style-------------------------------*/#search_bg {width:960px;
height:50px;
#search_bg #button_bg. seach_type{Display:block;
width:80px;
Height:auto;
padding:0px;
Border:solid 1px rgba (204,204,204,0.5);
Position:absolute;
top:45px;
left:20px;
Display:none;
z-index:21;
#search_bg #button_bg. Seach_type. type{Display:block;
width:80px;
height:26px;
Background:rgba (255,255,255,0.3);
border-bottom:dashed 1px #cccccc;
Text-align:center;
line-height:26px;
Cursor:pointer;
#search_bg #button_bg. Seach_type. type:hover{color: #126AC1;} #search_bg #button_bg. changetype{Display:block;
width:8px;
height:12px;
Position:absolute;
top:20px;
left:30px;
Cursor:pointer; Background:url (..
/images/class_1_16_1.png);
} #search_bg #button_bg {width:600px;
height:50px;
position:relative;
#search_bg #button_bg. textb{Display:block;
width:400px;
height:36px;
Outline:none;
Background:none; Border:solid 1PX #CCCCCC;
Float:left;
margin-top:5px;
margin-left:20px;
Text-align:left;
text-indent:20px;
font-size:15px;
#search_bg #button_bg. subb{Display:block;
width:80px;
height:40px;
Outline:none;
Border:none;
Background: #1F76CB;
Float:left;
margin-top:5px;
Cursor:pointer;
box-shadow:0 1px 2px Rgba (28,116,203,0.5);
Color: #ffffff;
font-size:15px; text-shadow:0
1px 2px Rgba (245,247,250,0.2); #search_bg #button_bg. textb:focus{border:solid 1px #1F76CB #search_bg #button_bg. subb:hover{box-shadow:0 1px 3
PX Rgba (28,116,203,1);
#search_bg #button_bg. keyword{width:400px;
Height:auto;
Border:solid 1px #cccccc;
Border-top:none;
Position:absolute;
top:45px;
left:20px;
z-index:40;
box-shadow:1px 2px 2px Rgba (5,5,5,0.1);
Display:none;
#search_bg #button_bg. Keyword span{display:block;
Clear:both;
width:400px;
height:30px;
text-indent:15px;
line-height:30px;
Cursor:pointer;
Background:rgba (255,255,255,0.3); Border-bottom:d ashed 1px #cccccc;
#search_bg #button_bg. Keyword span:hover{Background:rgba (0,0,0,0.5);}
/*------------------seach result set style---------------------*/#search_result {width:960px; height:auto; min-height:400px;
Overflow:hidden; #search_result. result_num{width:960px; height:26px; text-align:left; text-indent:15px; font-size:15px; line-heigh
t:26px;
Color: #767676; #search_result. result{width:960px; height:auto; max-height:110px; margin-top:15px; margin-bottom:15px; padding-top
: 15px;
padding-bottom:15px;
text-indent:20px;
line-height:25px;
Color: #333333;
Text-overflow:ellipsis;
overflow:hidden;/* above three lines to implement overflow display ellipsis/border-bottom:dashed 1px #cccccc;
} #result_page {width:960px;
height:30px;
} #result_page a{Display:block;
Float:left;
margin-left:5px;
width:30px;
height:30px;
Text-align:center;
Text-decoration:none;
line-height:30px;
Background:none;
Color: #363636;
Border:solid 1px #A5A5A5;
Transition:all 5s linear; -webkit-transition: Al.5s linear;/* Safari and Chrome or liebao*/-moz-transition:all. 5s Linear;/*firefox/-o-transition:all. 5s Linea
R;/*opera/-ms-transition:all 5s linear;/*for ie*/} #result_page a:hover{color: #0A67C1;
Border:solid 1px #0A67C1;
#result_page. nowpage{border:solid 1px #EAE8E8;
Color: #0F9512;
#result_page. Previous, #result_page. next{width:80px;
height:30px;
}
The code for Keyword.js is as follows:
$ (document). Ready (function () {/*--------------------search box style control JS------------------------/var checktype=$ ("#search_
BG #button_bg. changetype ");
var type=$ ("#search_bg #button_bg. Seach_type. Type");
var seach_type=$ ("#search_bg #button_bg. Seach_type");
var form=$ ("#search_bg #button_bg form");
var textb=$ ("#search_bg #button_bg form. Textb");
var subb=$ ("#search_bg #button_bg form. Subb");
var tbcolor= "#126AC1"; Textb.focus ()//Document loaded search box gets focus var search_types={"types": [{Name: "WD", Action: "./search.php", Value: "Search this Site", Subcolor: "#126AC1", Stype: "./images/sanjiao_03.png"}, {name: "WD", Action: "http://www.baidu.com/s", Value: "Baidu", Subcolor: "# 126ac1 ", Stype:"./images/sanjiao_03.png "}, {name:" Q ", Action:" http://www.so.com/s ", Value:" 360 search ", Subcolor:" # 53c920 ", Stype:"./images/sanjiao_04.png "}, {name:" W ", Action:" http://www.soso.com/q ", Value:" Tencent Search ", Subcolor:" # 760AAA ", Stype:"./images/sanjiao_05.png "}, {name:" Query ", Action:" Http://www.xuan369.com/so/qqkk8.jsp ", Value:" Sogou Search ",Subcolor: "#F94F1B", Stype: "./images/sanjiao_06.png"}, {name: "Q", Action: "Http://209.85.228.42/search", Value: "Google search
", Subcolor:" #29C971 ", Stype:"./images/sanjiao_07.png "}]};
alert (Search_types.types[1].value);
Select the Search Type button is clicked Checktype.click (function () {SEACH_TYPE.CSS ({"Display": "Block", height:0});
Seach_type.animate ({height: (type.height () +1) *type.length,},500);
}); Type.click (function () {//alert (search_types.types[$ (This). Index ()].value) form.attr ("Action", search_types.types[
$ (this). Index ()].action)//Change the form submission location textb.attr ("name", search_types.types[$ (This). Index ()].name);//Change form variable name Subb.val (search_types.types[$ (This). Index ()].value);//Change button to display Subb.css ({background:search_types.types[$ (this). Index ()].subcolor})//Change button color tbcolor=search_types.types[$ (this). Index ()].subcolor;//Change the border color of the input box Checktype.css ({"
Background ":" url ("+search_types.types[$" (This). Index ()].stype+ ")"});
Subb.css ({"Box-shadow": "0 1px 2px" +search_types.types[$ (This). Index ()].subcolor}); TeXtb.focus ()//edit box gets focus seach_type.animate ({height:0,},500,function () {seach_type.css ({"Display": "None", height:0
});
});
}); Seach_type.mouseleave (function () {seach_type.animate ({height:0),},500,function () {seach_type.css ({"Display": "No
Ne ", height:0});
});
});
Textb.focus (function () {textb.css ({border: "Solid 1px" +tbcolor});
Seach_type.animate ({height:0,},500,function () {seach_type.css ({"Display": "None", height:0});
});
});
Textb.blur (function () {textb.css ({border: "Solid 1px" + "#CCCCCC"});
});
/*-----------------get the keyword JS---------------------/var textb=$ ("#search_bg #button_bg form. Textb"); Textb.keyup (function (event) {if (Textb.val () = "" | |
Textb.val () = = "") {return; } if (event.which!=39&&event.which!=40&&event.which!=37&&event.which!=38&& event.which!=13) $.ajax ({url: "Http://suggestion.baidu.com/su", type: "Get", DataType: "Jsonp", Jsonp: ' Jsonca Llback ', Async:false, timeout:5000,//Request Timeout data:{"WD": Textb.val (), "CB": "Keydata"}, Success:function (JSON) {}, Error:fu
Nction (XHR) {return;
}
});
});
});
Print keyword function keydata (keys) {var len=keys.s.length;
var keywordbox=$ ("#search_bg #button_bg. Keyword");//Keyword box var textb=$ ("#search_bg #button_bg form. Textb");
var subb=$ ("#search_bg #button_bg form. Subb");
if (len==0) {keywordbox.css ({display: ' None '});
}else{keywordbox.css ({display: "block"});
} var spans= ""; for (Var i=0;i<len;i++) {spans+= "<span>" +keys.s[i]+ "</span>"} keywordbox.html (spans);//write keywords to keyword box
Child Keywordbox.animate ({height: (keywordbox.children (). Height () +1) *len//keyword drop effect},100); Click on the Candidate Vocabulary Keywordbox.children (). Click (function () {Textb.val ($ (this). html ());//select vocabulary put in input box Keywordbox.animate ({h
eight:0//Key Box Shrinkage effect},10,function () {keywordbox.css ({display: "None", Height: "Auto"});
Keywordbox.empty ()//Empty Box contents}); Textb.focus ()//LoseThe In box gets the focus/$ ("#search_bg #button_bg form"). Submit (); Submit button gets focus after Subb.focus (function () {//submit button gets focus keywordbox.animate ({height:0//key box shrinkage effect},10,function ()
Wordbox.css ({display: "None", Height: "Auto"});
Keywordbox.empty ()//Empty Box contents});
}); /*textb.blur (The function () {//input box loses focus after shrinking the keyword box (this method will be broken with the Click candidate Method Conflict) Keywordbox.animate ({height:0//key box shrinkage effect},100,func
tion () {keywordbox.css ({display: "None", Height: "Auto"});
Keywordbox.empty ()//Empty Box contents}); }//Keywordbox.mouseleave (function () {//mouse left keyword box to shrink keyword box (replace previous method) Keywordbox.animate ({height:0//key box shrinkage effect},
100,function () {keywordbox.css ({display: "None", Height: "Auto"});
Keywordbox.empty ()//Empty Box contents});
}); The Var numspan=0;//is used to specify the selection candidate (through the direction key change) Textb.keydown (function (event) {//If a carriage return is submitted, the keyword box can also automatically shrink if (event.which==13) {ke
Ywordbox.animate ({height:0//key box shrinkage effect},10,function () {keywordbox.css ({display: "None", Height: "Auto"}); Keywordbox.emPty ()//Empty Box contents}); /*$ ("#search_bg #button_bg form"). Submit (function () {return false;//block commit}); *//*$ ("#search_bg #button_bg for M "). Submit (function (e) {e.preventdefault ();//Block Commit Method 2});//press the DOWN ARROW key if (event.which==40) {if (Numsp
An==len) numspan=0; for (Var i=0;i<len;i++) {if (numspan==i) {Keywordbox.children (). EQ (i). css ({"Background-color": "Rgba" (0,
0,0,0.3) "});
}else{Keywordbox.children (). EQ (i). css ({"Background-color": "Rgba (255,255,255,0.3)"});
} textb.val (Keywordbox.children (). EQ (numspan). html ());
numspan++;
//press the UP ARROW key if (event.which==38) {numspan--;
if (Numspan==len) numspan=0; for (Var i=0;i<len;i++) {if (numspan==i) {Keywordbox.children (). EQ (i). css ({"Background-color": "Rgba" (0,
0,0,0.3) "});
}else{Keywordbox.children (). EQ (i). css ({"Background-color": "Rgba (255,255,255,0.3)"});
} } textb.val (Keywordbox.children (). EQ (numspan). html ());
}
});
Keywordbox.children (). MouseOver (function () {numspan=$ (this). index (); for (Var i=0;i<len;i++) {if (numspan==i) {Keywordbox.children (). EQ (i). css ({"Background-color": "Rgba" (0,
0,0,0.3) "});
}else{Keywordbox.children (). EQ (i). css ({"Background-color": "Rgba (255,255,255,0.3)"});
} textb.val (Keywordbox.children (). EQ (numspan). html ());
});
}
Page effect as shown:
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.
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
