今天我们来用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. Linux 创建子进程执行任务
			
    Linux 操作系统紧紧依赖进程创建来满足用户的需求.例如,只要用户输入一条命令,shell 进程就创建一个新进程,新进程运行 shell 的另一个拷贝并执行用户输入的命令.Linux 系统中通过 f ...
    
			
    2. 
						
  2. 网络时钟服务器,NTP授时设备,北斗网络校时服务器,GPS时间同步器
			
    网络时钟服务器,NTP授时设备,北斗网络校时服务器,GPS时间同步器 网络时钟服务器,NTP授时设备,北斗网络校时服务器,GPS时间同步器 论述当下网络时间同步的重要性   北京华人开创科技发展有限公 ...
    
			
    3. 
						
  3. tomcat配置https协议
			
    tomcat配置https协议 1.找到本地jdk底下的bin目录,bin目录底下存在文件keytool.exe(在bin目录下空白处,按住shift右击,打开命令窗口,如下图) 2.在cmd的命令窗 ...
    
			
    4. 
						
  4. jquery tips简易使用方法 新手必看
			
    使用jquery1.12.4以上版本 使用jquery插件 tips .beg-pull-right 点击时的选择器 在这里写的是一个类选择器   记得引入jquery $(".beg-pu ...
    
			
    5. 
						
  5. Ubuntu 搭建简单的git server
			
    Git 可以使用四种主要的协议来传输资料:本地协议(Local),HTTP 协议,SSH(Secure Shell)协议及 Git 协议. 在此,我们将会讨论那些协议及哪些情形应该使用(或避免使用)他 ...
    
			
    6. 
						
  6. 【Splay】bzoj1500（听说此题多码上几遍就能不惧任何平衡树题）
			
    1500: [NOI2005]维修数列 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 15112  Solved: 4996[Submit][Statu ...
    
			
    7. 
						
  7. liveshow回顾
			
    在2017年8月14号的一天接到一个即看即买的项目,大致功能如下 1.现场走秀直播同步到H5页面 2.实时显示直播间人数 3.点赞并实时显示给用户 4.在某个时间点,可以全体推送一些消息给所有用户 5 ...
    
			
    8. 
						
  8. file中private_data
			
    这个是Linux下连接VFS文件系统框架和不同文件/文件系统底层实现之间的一个核心数据结构,虽然它只是一个指针,但是一个指针可以解决所有问题,有了它,妈妈再也不用担心我的学习.我们回想一下用户态线程的 ...
    
			
    9. 
						
  9. LVS集群DR模式实例(4)
			
    LVS集群DR模式实例 1. 实验拓扑图 2. 实验环境 3台CentOS6.4 64bit的服务器. 类型 IP DR eth0:10.20.73.20  VIP eth0:0 10.20.73.3 ...
    
			
    10. 
						
  10. ABP架构学习系列
			
    ABP实践学习系列 ABP Zero 本地化语言的初始化和扩展 ABP Zero 导航菜单之角色权限 ABP Zero示例项目问题总结  ABP后台服务之作业调度Quartz.NET   ABP架构学 ...
    
			
    11.