今天我们来用JS实现百度搜索功能，下面上代码：

　　　　HTML部分：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <!--百度iocn图标-->

        <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon"/>

        <title>百度一下,你就知道</title>

        <link rel="stylesheet" href="css/baidu.css" />

        <script src="js/H.js"></script>

    </head>

    <body onload="onloads(),randomBack()">

        <div class="box">

            <div class="box_log">

                <div class="box_log_img">

                    <img src="img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png"/>

                </div>

            </div>

            <div class="box_text">

                <div class="box_text_content">

                    <input type="text" name="text" id="text" value="" autofocus="autofocus"/>

                    <input type="button" name="bdyx" id="btn" value="百度一下" />

                    <ul id="search">

                        <li class="li1" id="0" onclick="iptShow(this.id)"></li>

                        <li class="li1" id="1" onclick="iptShow(this.id)"></li>

                        <li class="li1" id="2" onclick="iptShow(this.id)"></li>

                        <li class="li1" id="3" onclick="iptShow(this.id)"></li>

                        <li class="li1" id="4" onclick="iptShow(this.id)"></li>

                        <li class="li1" id="5" onclick="iptShow(this.id)"></li>

                        <li class="li1" id="6" onclick="iptShow(this.id)"></li>

                        <li class="li1" id="7" onclick="iptShow(this.id)"></li>

                        <li class="li1" id="8" onclick="iptShow(this.id)"></li>

                        <li class="li1" id="9" onclick="iptShow(this.id)"></li>

                    </ul>

                </div>

            </div>

        </div>

        <script type="text/javascript" src="js/index.js" ></script>

    </body>

</html>

　　　　CSS层叠样式部分：

body{/*清除浏览器自带样式*/

    margin: 0;

    padding: 0;

    /*background-repeat: no-repeat;*/

    min-width: 1200px;

}

.box{/*最大的盒子*/

    width: 100%;

    height: 100%;

    /*background: yellow;*/

    /*height: 636px;*/

}

.box_log{/*log盒子*/

    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搜索框盒子大小*/

    width: 100%;

    height: 36px;

}

.box_text_content{

    width: 640px;

    height: 36px;

    margin: 0 auto;

}

#text{  /*input框的样式*/

    width: 540px;

    height: 36px;

    box-sizing: border-box;

    margin-top: 3px;

    text-indent: 4px;

    outline: none;

}

.log_img{/*input框中的小相机*/

    position: absolute;

    left: 62%;

    top: 35.5%;

}

#btn{  /*按钮的样式*/

    width: 100px;

    height: 36px;

    background: #3385FF;

    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{  /*当按钮hover的样式*/

    cursor: pointer;

}

#search{   /*搜索框的样式*/

    width: 540px;

    margin: 0;

    padding: 0;

    list-style: none;

    display: none;

    border: 1px solid #E3E5E4;

}

#search li{  /*搜索框li的大小颜色*/

    line-height: 36px;

    background: white;

}

#search li:hover{  /*当li hover的样式*/

    background: #F0F0F0;

}

.li1{ /*li中的值缩进*/

    text-indent: 4px;

}

　　　　JS部分：

var otext = document.getElementById("text");  //获取input框

ose = document.querySelector("#search");  //通过类名选择器 选择到search框

lis = document.getElementsByClassName("li1");  //获取所有的li

otext.onkeyup = function(){   //当在input框中键盘弹起发生事件

    ose.style.display = otext.value?"block":"none";  /*三目运算符,如果otext.value的值部位空,则block。*/

    var osc = document.createElement("script");  /*创建一个script标签*/

    osc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=houxiaowei";

    /*srcipt的src值引入百度的url,然后将otext文本框中输入的内容连接到url,在后面在运行自己的方法*/

    document.body.appendChild(osc);

    /*将创建好的script标签元素放入body中*/

    /*input框中按下回车根据input的值跳转页面*/

    if(event.keyCode==13){

        /*将百度作为连接,传入input的值,并跳入新的页面*/

        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; /*获取ose下的所有li*/

function houxiaowei(json){

    var jsonLength = 0;  /*json长度的初始值*/

//                    console.log(json.s);

    for(var x in json.s){   /*将循环的次数变成json的长度*/

        jsonLength++;

    }

//                    console.log(jsonLength);

    for(var i=0;i<lis.length;i++){

        if(jsonLength==0){  /*如果遍历出的长度等于0,li的值为空*/

            arr[i].innerHTML = null;

        }else{

            if(json.s[i]!=null){/*如果json[i]的值不等于空,则将它的值放入li中*/

                arr[i].innerHTML = json.s[i];

            }

        }

    }

    if(count==lis.length-1){

        count=0;

        search=0;

    }

    count++;

    search++;

}

/*单击li中的值显示在input框中*/

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();    //阻止冒泡事件,除了IE8及以下不兼容,其他浏览器都兼容

    e.cancelBubble=true;  //阻止冒泡事件,IE8及以下兼容

//                alert(e);

}

/*单击body中的任意地方隐藏li*/

document.body.onclick = function(){

    ose.style.display = "none";

}

/*单击百度btn的时候触发,并跳到新的连接*/

var btn = document.querySelector("#btn");

cookies = [];

btn.onclick = function(){

    /*获取当前input的值*/

    var otext = document.getElementById("text").value;

    /*将百度作为连接,传入input的值,并跳入新的页面*/

    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

    }

}

/*加载页面input为空*/

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%";

}‘“

　　搜索功能的实现源于百度的 https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+otext.value+"&cb=houxiaowei，这个链接,其中”wd”的值为input框中需要搜索的值,它会返回一个json对象。&cb的值是一个方法或者是函数

，它用来将json中的值提取出来放入li中。

　　　　今天就分享到这里~



　　
												


											
JS 实现百度搜索功能的更多相关文章
	

    
								
  1. 原生JS实现百度搜索功能
		
    今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html> <head> <meta charset= ...
    
		
    2. 
						
  2. js/jQuery实现类似百度搜索功能
		
    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
    
		
    3. 
						
  3. vue 使用watch监听实现类似百度搜索功能
		
    watch监听方法,watch可以监听多个变量,具体使用方法看代码: HTML: <!doctype html> <html lang="en"> < ...
    
		
    4. 
						
  4. js 获取百度搜索关键词的代码
		
    有可能有时候我们会用到在百度搜什么关键词进来我们的网站的,所有我们又想拿到用户搜索的关键词. 这是我研究了半天所得出的办法.话不多说直接贴代码 <script> function quer ...
    
		
    5. 
						
  5. js实现百度搜索框滑动固定顶部
		
    现在很多主流系统例如百度.有道.爱奇艺等的搜索框都有一个特点,滑动到刚好看不到搜索框时,固定搜索框到顶部,这也算是一个对用户友好型的操 作. 在看了百度的js和css后自己摸索出来实现效果,还是学艺不 ...
    
		
    6. 
						
  6. js搜索框 js仿百度搜索 js下拉框 jQuery.Autocomplete使用
		
    做了一个网站,需要根据文本框的输入模糊搜索数据库内容给出提示供用户选择,就找到了jQuery.Autocomplete 效果如下图: 该插件托管在github上,具体地址:https://github ...
    
		
    7. 
						
  7. 利用api模拟百度搜索功能
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    8. 
						
  8. 用vue实现百度搜索功能
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    9. 
						
  9. JS——模拟百度搜索
		
    注意事项: 1.for循环移除子节点时,其长度是变化的 2.在文档流中,input.img.p等标签与其他标签有3px的距离,利用左浮动,可以消除3px距离 3.背景图片定位时,第一个值是x轴方向的值 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. [Spark内核] 第29课：Master HA彻底解密
			
    本课主题 Master HA 解析 Master HA 解析源码分享 [引言部份:你希望读者看完这篇博客后有那些启发.学到什么样的知识点] 更新中...... Master HA 解析 生产环境下一般 ...
    
			
    2. 
						
  2. [转载]解决sudo: sorry, you must have a tty to run sudo
			
    前几天遇到一个问题,在一个终端中调用另一个shell,始终是无法执行的,后来捕捉到报错信息为sudo: sorry, you must have a tty to run sudo,后来,在网上了解到 ...
    
			
    3. 
						
  3. React Native分享第三方遇到的问题
			
    这几天做APP的分享,好多东西都不懂,踩了好多坑,所幸现在做好了,开心^_^ 时间紧,随便记一下先. 1.签名文件要和各平台的签名一致 2.新浪微博和微信的分享要打包之后,加上签名了才可以(我一直不知 ...
    
			
    4. 
						
  4. C陷阱：求数组长度
			
    // 这是一篇导入进来的旧博客,可能有时效性问题. 程序中,当我们建立了一个int型数组:int a[]={1,2,3,4,5,6};随后我们可能需要知道它的长度,此时可以用这种方法:length = ...
    
			
    5. 
						
  5. re  模块  正则表达式
			
    re模块(正则表达式)   一.什么是正则表达式 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法.或者说:正则就是用来描述一类事物的规则.(在Python中)它 ...
    
			
    6. 
						
  6. BZOJ 1061: [Noi2008]志愿者招募【单纯形裸题】
			
    1061: [Noi2008]志愿者招募 Time Limit: 20 Sec  Memory Limit: 162 MBSubmit: 4813  Solved: 2877[Submit][Stat ...
    
			
    7. 
						
  7. hdu_1036(取整和格式控制)
			
    题意很简单,求平均时间 复习一下如何取整 (int) fl 是直接向下取整  ==  floor(fl) 向上取整 (int)(fl+1)  == ceil(fl) 四舍五入 (int)(fl+0.5 ...
    
			
    8. 
						
  8. 水dp第二天（背包有关）
			
    水dp第二天(背包有关) 标签: dp poj_3624 题意:裸的01背包 注意:这种题要注意两个问题,一个是要看清楚数组要开的范围大小,然后考虑需要空间优化吗,还有事用int还是long long ...
    
			
    9. 
						
  9. HDU Today（最短路）
			
    http://acm.hdu.edu.cn/showproblem.php?pid=2112 HDU Today Time Limit: 15000/5000 MS (Java/Others)     ...
    
			
    10. 
						
  10. sql server2008数据库复制实现数据同步常见问题
			
    sql server2008数据库复制实现数据同步常见问题 在原作者基础上追加 sql server2008数据库复制实现数据同步常见问题 23.发布 'xx' 的并发快照不可用,因为该快照尚未完全生 ...
    
			
    11.