今天我们来用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. Error: Your project contains C++ files but it is not using a supported native build system
			
    我在编写有关JNI的代码的时候回报这个错误,我在网上搜了相关的资料后,找到了一篇文章解决了这个问题,点击这里查看这篇文章,我在照着这篇文章尝试的时候,总有一些错误,现在我把自己详细的解决流程贴出来,供 ...
    
			
    2. 
						
  2. 【Java】静态代码块使用
			
    一.java静态代码块与静态方法区别一般情况下,如果有些代码必须在项目启动的时候就执行的时候,需要使用静态代码块,这种代码是主动执行的;需要在项目启动的时候就初始化,在不创建对象的情况下,其他程序来调 ...
    
			
    3. 
						
  3. Java压测之四两拨千斤
			
    压测之四两拨千斤核心观念: 1.传统的http请求肯定不能用于压测,原因是请求一次,响应一次,而响应数据同时占用了客户端的带宽,故此,客户端请求后,不需要接受响应,让服务器单相思去. 2.寻找可以令服 ...
    
			
    4. 
						
  4. 关于Gson定制的分析
			
    首先,为什么需要定制呢?很多同学可能觉得默认的不也挺好的嘛?最开始,我也是觉得的,而且我们一开始也是用默认的解析方式的,因为我们与外部约定的数据格式一直都比较稳定.但当外部数据不稳定,那么Gson默认 ...
    
			
    5. 
						
  5. (๑•̀ㅂ•́)و✧随笔总目录ヾ(≧▽≦*)o
			
    SSM整合进阶篇 日常手记 开源博客My Blog系列 短信接口攻击事件 读书笔记 SSM整合优化篇 SSM整合基础篇 SSM整合进阶篇 Spring+SpringMVC+MyBatis+easyUI ...
    
			
    6. 
						
  6. 循序渐进之Spring AOP(2) - 基本概念
			
    学习AOP前要先了解几个重要术语:Joinpoint.Pointcut.Advice 仍然以改装车比喻,拿到心爱的汽车后想做改装,第一件事是什么?找到要改装的地方.车上可改装的地方很多,但每个人感兴趣 ...
    
			
    7. 
						
  7. deeplearning.ai 改善深层神经网络 week1 深度学习的实用层面 听课笔记
			
    1. 应用机器学习是高度依赖迭代尝试的,不要指望一蹴而就,必须不断调参数看结果,根据结果再继续调参数. 2. 数据集分成训练集(training set).验证集(validation/develop ...
    
			
    8. 
						
  8. AtCoder Regular Contest 078
			
    我好菜啊,ARC注定出不了F系列.要是出了说不定就橙了. C - Splitting Pile 题意:把序列分成左右两部分,使得两边和之差最小. #include<cstdio> #inc ...
    
			
    9. 
						
  9. 【笔记】移动端H5数字键盘input type=number的处理（IOS和Android）
			
    在Vue中的项目,基于VUX-UI开发,一个常见的需求: 1.金额输入框 2.弹出数字键盘 3.仅支持输入两位小数,限制最大11位数,不允许0开头 后续:与UI沟通后, 思路调整为限制输入,并减少正则 ...
    
			
    10. 
						
  10. 初识LINUX之常见命令
			
    玩过Linux的人都会知道,Linux中的命令的确是非常多,但是玩过Linux的人也从来不会因为Linux的命令如此之多而烦恼,因为我们只需要掌握我们最常用的命令就可以了.当然你也可以在使用时去找一下 ...
    
			
    11.