今天我们来用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. （译）ABP之Abp Session
			
    原文地址:https://aspnetboilerplate.com/Pages/Documents/Abp-Session 介绍 ABP提供IAbpSession接口获取当前用户和租户信息,而不是使 ...
    
			
    2. 
						
  2. python之Character string
			
    1.python字符串 字符串是 Python 中最常用的数据类型.我们可以使用引号('或")来创建字符串,l Python不支持单字符类型,单字符也在Python也是作为一个字符串使用.  ...
    
			
    3. 
						
  3. 3.If statements
			
    if 语句   电脑程序不只是执行命令.时常会需要做出选择.例如基于一个条件的选择.Python有这样几种条件运算:   >   greater than <   smaller than ...
    
			
    4. 
						
  4. Lua和C的语法差别
			
    没有main函数 Lua是脚本语言,没有固定入口的main函数.当lua解析器解析某个lua代码文件时,lua解析器一样一行的解析lua脚本. print("Hello lua") ...
    
			
    5. 
						
  5. dict-命令行下中英文翻译工具
			
    命令行下中英文翻译工具(Chinese and English translation tools in the command line) 安装(Install) ubuntu 安装 pip sud ...
    
			
    6. 
						
  6. ABP架构学习系列
			
    ABP实践学习系列 ABP Zero 本地化语言的初始化和扩展 ABP Zero 导航菜单之角色权限 ABP Zero示例项目问题总结  ABP后台服务之作业调度Quartz.NET   ABP架构学 ...
    
			
    7. 
						
  7. STL中的nth_element()方法的使用
			
    STL中的nth_element()方法的使用 通过调用nth_element(start, start+n, end) 方法可以使第n大元素处于第n位置(从0开始,其位置是下标为 n的元素),并且比 ...
    
			
    8. 
						
  8. hihoCoder #1498 : Diligent Robots【数学】
			
    #1498 : Diligent Robots 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 There are N jobs to be finished. It t ...
    
			
    9. 
						
  9. [bzoj3191] [JLOI2013]卡牌游戏
			
    概率DP. 首先由题解可得>_<,胜出概率只与剩余人数.与庄家的相对位置有关. 所以设f[i][j]表示剩下i个人,从庄家开始第j个人的胜利概率... 根据卡牌一通乱搞即可... #inc ...
    
			
    10. 
						
  10. android仿微信红包动画、Kotlin综合应用、Xposed模块、炫酷下拉视觉、UC浏览器滑动动画等源码
			
    Android精选源码 仿微信打开红包旋转动画 使用Kotlin编写的Android应用,内容你想象不到 Android手机上的免Root Android系统日志Viewer 一个能让微信 Mater ...
    
			
    11.