原生js模仿百度搜索引擎小demo

最新推荐文章于 2021-08-27 15:57:14 发布
最新推荐文章于 2021-08-27 15:57:14 发布
阅读量1.3k 收藏 4
点赞数 1
分类专栏： 原生js 文章标签： 原生js仿制百度搜索引擎小demo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43385047/article/details/85018871
版权

调用百度接口 模仿百度搜索引擎小demo

话不多说 直接上代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin:0;
                padding: 0;
            }
            body{
                padding: 50px;
            }
            div{
            	outline: 0;
            	
            }
            img{
            	width:280px;
            	height: 130px;
            	margin: 0 auto;
            	margin-top: 150px;
            	display: block;
            }
            .search{
            	width:650px;
            	height: 350px;
            	margin: 20px auto;
            }
            input{
            	width:500px;
            	height: 36px;
    			line-height: 22px;
    			margin: 6px 0 0 7px;
    			padding: 0 7px;
    			background: transparent;
    			border: 1px solid rgb(204,204,204);
    			outline: 0;
    			-webkit-appearance: none;
    			
            }
            button{
            	width: 100px;
            	height: 36px;
            	background: rgb(51,133,255);
            	color: white;
            	border: 0;
    			outline: 0;
    			cursor: pointer;
            }
            #ul1{
                width: 514px;
                border: 1px solid rgb(204,204,204);
                display: none;
                margin-left:7px ;
            }
            #ul2{
                width: 514px;
                display: none;
                border: 1px solid rgb(204,204,204);
                margin-left:7px ;
                border-top: none;
                overflow: hidden;
            }
            li span{
            	float: right;
            	margin-right:5px ;
            	text-decoration: underline;
            	cursor: pointer;
            }
            li{	
            	text-indent: 8px;
                list-style: none;
                font: 14px arial;
                line-height: 25px;
            }
            li a:link,li a:visited{
            	text-decoration: none;
            	    width: 514px;
				    color: #000;
				    font: 14px arial;
				    line-height: 25px;
				    display: block;
            }
            li a:hover{
               background: #999;

            }
            
        </style>
    </head>

    <body>
    	<img src="img/bd_logo1.png"/>
        
        <div  class="search" hidefocus="true" tabindex="0" onmouseleave="keyTipsHidde()" onblur="keyTipsHidde()">
        	<input type="text" id="q" onkeydown="keyEnter()"  onclick="keyTips()"  onchange="keyTips()" maxlength = "255"/>
        	<button onclick="toSearch()">百度一下</button>
        	<ul id="ul1"></ul>
        	<ul id="ul2"></ul>
        </div>
        
        <script type="text/javascript">
        		
        		var oQ=document.getElementById('q')
                var oUl=document.getElementById('ul1')
                var oUl2=document.getElementById('ul2')
                var khtml="<li>最近搜索：<span onclick='listClear()'>清除历史</span></li>";
                var arr=[];
                if(localStorage.getItem('list')){
                    arr=JSON.parse(localStorage.getItem('list'));

                }
                oUl2.innerHTML=khtml;
                oQ.value='';
            	function baidudata(data){ //回调函数
                var html='';
                if(data.s.length){
                    oUl.style.display = 'block';
                    for(var i=0;i<data.s.length;i++){
                        html+='<li><a href="https://www.baidu.com/s?&wd='+data.s[i]+'">'+data.s[i]+'</a></li>'
                    }
                    oUl.innerHTML=html;
                }else{
                    oUl.style.display='none'
                }
            }
            
            window.onload=function(){ 
                    var list=JSON.parse(localStorage.getItem('list'))||[]
            	 for(var i=0;i<list.length;i++){
            	 khtml+='<li><a href="https://www.baidu.com/s?&wd='+list[i]+'">'+list[i]+'</a></li>'
            	 }
            	 oUl2.innerHTML=khtml;
                
                oQ.onkeyup=function(){ //键入内容过程 内容提示
                    if(this.value !=""){
                    	oUl2.style.display='none'
                        var oScript=document.createElement('script')    
                        oScript.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?wd='+this.value+'&cb=baidudata'
                        document.body.appendChild(oScript)
                    }else{
                        oUl.style.display='none'
                        oUl2.style.display='block'
                    }
                }
            }
            function toSearch(){//点击百度一下 执行跳转
            	
            	arr.unshift(oQ.value);
            	if(arr.length>5){
            		arr.pop(oQ.value);
            	}
            	window.localStorage.setItem('list',JSON.stringify(arr));
            	 window.location.href = 'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd='+oQ.value+'&oq=js%25E6%2596%25B9%25E6%25B3%2595%25E5%25A3%25B0%25E6%2598%258E&rsv_pq=cb1725920003d02e&rsv_t=69bfZqgNEF5hTnxnZ0HyJ9JEygSKw3A96DZpP0RrfPsrNfexCS3yn2gViUw&rqlang=cn&rsv_enter=1&inputT=8477&rsv_sug3=79&rsv_sug1=61&rsv_sug7=101&bs=js%E6%96%B9%E6%B3%95%E5%A3%B0%E6%98%8E';
            }
            function keyEnter(){//按下enter键，执行跳转事件 回车键的键值为13
            	
			if(event.keyCode==13){
				arr.unshift(oQ.value);
				if(arr.length>5){
            		arr.pop(oQ.value);
            	}
				window.localStorage.setItem('list',JSON.stringify(arr));
             window.location.href = 'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd='+oQ.value+'&oq=js%25E6%2596%25B9%25E6%25B3%2595%25E5%25A3%25B0%25E6%2598%258E&rsv_pq=cb1725920003d02e&rsv_t=69bfZqgNEF5hTnxnZ0HyJ9JEygSKw3A96DZpP0RrfPsrNfexCS3yn2gViUw&rqlang=cn&rsv_enter=1&inputT=8477&rsv_sug3=79&rsv_sug1=61&rsv_sug7=101&bs=js%E6%96%B9%E6%B3%95%E5%A3%B0%E6%98%8E';
			}
			}
            function keyTips(){//历史记录提示
            	if(oQ.value==''){
            	oUl2.style.display='block'
            	
            	}else{
            		oUl2.style.display='none'
            	}
            }
            function keyTipsHidde(){//历史记录框隐藏
            	oUl2.style.display='none';
            }
            
            function listClear(){//清除历史记录
            	arr=[];
            	window.localStorage.setItem('list',JSON.stringify(arr));
            	 var khtml="<li>最近搜索：<span onclick='listClear()'>清除历史</span></li><li>近期无搜索记录</li>";
            	 oUl2.innerHTML=khtml;
            }
        </script>
    </body>
</html>
weixin_43385047
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
HTML 模仿百度首页 （html+css）
一个开发初学者的博客
03-16 863
图片请自行自行插入修改。 如有涉及侵权，请私信删除，谢谢。 仅作参考，请勿用作其他用途。
搜猫搜索引擎源码|仿百度搜索引擎源码
12-24
搜猫搜索引擎源码|仿百度搜索引擎源码
javascript 搜索功能的模拟demo (command+f（mac）或ctrl+f（windows）)
qq_39833794的博客
06-25 1142
经常在编译器和浏览器上使用command+f（mac）或ctrl+f（windows）查找某些字符，最近在复习正则以及字符串的一些方法所以写了个小demo模拟了这个小功能。主要使用了：正则execexec() 方法用于检索字符串中的正则表达式的匹配。返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。这个数组中input 属性则存放的是被检索的字符串 string。index ...
JS实现类似于百度搜索引擎功能（jspon跨域）
Michelledai1104的博客
08-27 1127
首先测试百度接口 <!-- 测试百度接口 --> <!-- <script src="https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34305,34099,33970,34273,34278,34004,34281,34107,34111,26350,22159&wd=爱奇艺&req=2&
仿百度搜索框源码
01-17
仿百度搜索框源码
人工智能-项目实践-搜索引擎-模仿百度首页开发的纯静态页面（未使用 jQuery 插件），支持切换搜索引擎，具有搜索关键字提示
最新发布
02-26
在这个名为“人工智能-项目实践-搜索引擎-模仿百度首页开发的纯静态页面”的项目中，开发者旨在构建一个类似于百度首页的静态网页，但不依赖于jQuery插件，而是利用JavaScript和其他相关技术来实现功能。这个项目...
原生JS实现祝福墙小demo
04-17
在本项目中，我们主要探讨如何使用原生JavaScript来实现一个简单的“祝福墙”小demo。这个应用允许用户在虚拟的墙上发布祝福语或者小秘密，与其他用户分享。以下是实现这个功能所需的关键知识点： 1. **HTML结构**...
基于H5的WindowsX plus 原生js html 模拟window的小demo
12-24
在这个项目中，原生JavaScript代码用于实现模拟Windows的各种功能，如启动、关闭程序，打开和关闭窗口，以及任务管理等。开发者可能使用了事件监听器（如`addEventListener`）来响应用户操作，并通过DOM操作（如`...
原生js写的一个华容道小游戏
09-22
《原生JS实现的华容道小游戏详解》 华容道，源于中国古代的棋盘游戏，是一种极具挑战性的智力玩具，玩家需要通过移动棋子，让特定棋子（通常是曹操）从设定的起点到达终点。在数字化的时代，利用原生JavaScript技术...
原生js实现自由拖拽弹窗代码demo
01-21
本文为大家分享了原生弹窗拖拽代码demo，供大家参考，具体内容如下 效果图： 实现代码： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>弹窗拖拽</title&...
简单Java搜索引擎实现——豆瓣主题搜索
06-25
这是信息检索课程的一个课后大作业，实现简单的搜索引擎功能，有多线程爬虫，中文分词，倒排索引，查询模型等内容。后台用Java实现，前台是一个简单的jsp界面。后粗糙，须建一个数据库，可从程序中Page类看出，就一张表，很简单。在运行前，需要先运行crawler类，保证从网页爬取数据，存在raws文件夹内。
模拟一个类似百度google的模糊搜索下拉列表
09-04
主要介绍使用js模拟一个类似百度google的模糊搜索下拉列表,需要的朋友可以参考下
js--搜索框提示仿百度
03-25
NULL 博文链接：https://stevenjohn.iteye.com/blog/1161754
如何制作一个简单的仿百度搜索功能的网页
热门推荐
weixin_37720904的博客
08-04 1万+
本篇博客知识点~ 版本一： 实现一个小功能：通过点击页面上不同的页数，去数据库查询不同的信息，更新到页面上。 版本二： 在查询的结果集合上继续查询；查询结果数据分页后的分页 就像图上这样点击不同的页数，去数据库查询出不同的信息处来~其实主要难点在于下面。如何通过当前页数，查到数据库中对应的信息。 页数 = 总行数/每一页显示的记录数+ (总行数%每一页显示的记录数==0?0:1); 本页
ajax仿百度搜索效果,利用autocomplete.js实现仿百度搜索效果（ajax动态获取后端[C#]数据）...
weixin_35330796的博客
08-05 396
实现功能描述：1、实现搜索框的智能提示2、第二次浏览器缓存结果3、实现仿百度搜索* { margin: 0px; padding: 0px; }#wrapper { height: 100%; padding-top: 100px; }.s-skin-container { position: fixed; _position: absolute; top: 0; left: 0; height:...
jQuery仿百度搜索引擎
fuzhijieabc的博客
08-12 429
项目效果 代码 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/searchEngine.css" /> </head> <script src="https://www.jq22.com/jquery/jquery-1.9.1.js"></script&g
15行Python 仿百度搜索引擎
weixin_30432579的博客
03-24 890
开发工具：PyCharm 开发环境：python3.6 + flask + requests 开发流程: 1. 启动一个web服务 from flask import Flask app = Flask(__name__) if __name__ == '__main__': app.run(host='127.0.0.1', port=6666) 2. 增加...
原生js写三级分销小demo
01-10
原生 JavaScript 实现三级分销小 Demo 的主要步骤如下： 1. 创建三个用户： 1) 顶级用户：拥有最高级别的分销权力。 2) 一级用户：由顶级用户推广而来，拥有中级分销权力。 3) 二级用户：由一级用户推广而来，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值