JS implements Baidu search, and js implements Baidu search

JS implements Baidu search, and js implements Baidu search

Today, we will use JS to implement the baidu search function. The code below:

HTML section:

<! DOCTYPE html> 
CSS Cascading Style section:
Body {/* clear the built-in style of the browser */margin: 0; padding: 0;/* background-repeat: no-repeat; */min-width: margin PX ;}. box {/* maximum box */width: 100%; height: 100%;/* background: yellow; * // * height: 636px ;*/}. box_log {/* log box */width: 100%; height: 250px; text-align: center ;}. box_log_img {margin: 0 auto; width: 300px; height: 150px ;}. box_log img {width: 300px; height: 150px; margin-top: 38px; margin-bottom: 19px ;}. box_text {/* text search box size */width: 100%; height: 36px ;}. box_text_content {width: 640px; height: 36px; margin: 0 auto;} # text {/* style of the input box */width: 540px; height: 36px; box-sizing: border-box; margin-top: 3px; text-indent: 4px; outline: none ;}. log_img {/* Small Camera */position: absolute; left: 62%; top: 35.5% ;}# btn {/* button style */width: 100px; height: 36px; background: # 3366ff; border: 0px; letter-spacing: 1px; color: white; margin-left:-5px; font-size: 15px; box-sizing: border-box; transform: translateY (1.5px); box-sizing: border-box;} # btn: hover {/* specifies the hover style */cursor: pointer ;} # search {/* search box style */width: 540px; margin: 0; padding: 0; list-style: none; display: none; border: 1px solid # E3E5E4 ;} # search li {/* search box li size color */line-height: 36px; background: white;} # search li: hover {/* When li hover's style */background: # F0F0F0 ;}. li1 {/* value indent in li */text-indent: 4px ;}
JS section:
Var otext = document. getElementById ("text"); // obtain the input box ose = document. querySelector ("# search"); // select lis = document in the search box through the class name selector. getElementsByClassName ("li1"); // obtain all liotext. onkeyup = function () {// when the keyboard pops up in the input box, the ose event occurs. style. display = otext. value? "Block": "none";/* Three-object operator. If the value of otext. value is empty, the block is used. */Var osc = document. createElement ("script");/* Create a script tag */osc. src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su? Wd = "+ otext. value + "& cb = houxiaowei";/* introduce the src value of srcipt to Baidu's url, and connect the content entered in the otext text box to the url, run your Method */document. body. appendChild (osc);/* put the created script Tag Element in the body * // press enter in the input box to jump to the page based on the input value */if (event. keyCode = 13) {/* use Baidu as the connection, input the input value, and jump into the new page */window. location. href = "https://www.baidu.com/s? Ie = UTF-8 & f = 8 & rsv_bp = 1 & rsv_idx = 1 & tn = baidu & wd = "+ otext. value }}var count = 0; var search = 0; var arr = ose. children;/* Get all li */function houxiaowei (json) {var jsonLength = 0;/* Initial Value of json length * // console. log (json. s); for (var x in json. s) {/* change the number of cycles to the json length */jsonLength ++;} // console. log (jsonLength); for (var I = 0; I <lis. length; I ++) {if (jsonLength = 0) {/* if the traversal length is equal to 0, the value of li is blank */arr [I]. innerHTML = null;} else {If (json. s [I]! = Null) {/* If the value of json [I] is not equal to null, put the value in li */arr [I]. innerHTML = json. s [I] ;}} if (count = lis. length-1) {count = 0; search = 0;} count ++; search ++;}/* click the value in li to display in the input box */function iptShow (thisId) {otext. value = arr [thisId]. innerHTML; window. location. href = "https://www.baidu.com/s? Ie = UTF-8 & f = 8 & rsv_bp = 1 & rsv_idx = 1 & tn = baidu & wd = "+ otext. value} otext. onclick = function (e) {ose. style. display = "block"; var e = event | window. event; e. stopPropagation (); // prevents bubble events. all browsers except IE8 and earlier are compatible with e. cancelBubble = true; // prevents bubble events, IE8 and below compatible // alert (e);}/* click anywhere in the body to hide li */document. body. onclick = function () {ose. style. display = "none";}/* trigger when you click Baidu btn and jump to the new connection */var btn = document. querySelector ("# btn"); coo Kies = []; btn. onclick = function () {/* Get the current input value */var otext = document. getElementById ("text "). value;/* use Baidu as the connection, pass in the input value, and jump to the new page */if (otext = "" | otext = null) {window. location. href = "http: // 127.0.0.1: 8020/% E7 % 99% BE % E5 % BA % A6/%E7%99%BE%E5%BA%A6%E9%A6%96%E9%A1%B5.html? _ Hbt = 1516599867084 ";} else {window. location. href =" https://www.baidu.com/s? Ie = UTF-8 & f = 8 & rsv_bp = 1 & rsv_idx = 1 & tn = baidu & wd = "+ otext}/* loading page input is blank */function onloads () {var s = otext. value = null; $ myId ("text "). focus ();} function randomBack () {var randomBk = parseInt (Math. random () * 545); document. body. style. background = "url (https://ss3.bdstatic.com/lPoZeXSm1A5BphGlnYG/skin/" + randomBk + ". jpg? 2) "; document. body. style. backgroundSize =" 100% ";} '"
The realization of search function comes from Baidu's https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su? Wd = "+ otext. value +" & cb = houxiaowei. In this link, the "wd" value is the value to be searched in the input box, and a json object is returned. The value of & cb is a method or function used to extract the value in json and put it into li.
Summary
The above section describes how to implement the baidu search function in Javascript. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!