JS implements Baidu search, and js implements Baidu search

Source: Internet
Author: User

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: // 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.


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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.