零基础打造一款属于自己的网页搜索引擎
gaoyangw 2024-11-04 13:00 12 浏览 0 评论
前言
在说这个之前，想必大家应该都比较了解搜索引擎了，它就是通过用户在浏览器输入框中输入文本，从而显示一些结果，你觉得哪项符合你要搜索的内容，你就点击哪项。
【一、项目准备】
浏览器：360浏览器
编辑器：Sublime Text 3
插件：Jquery-3.2.1.Min.Js
【二、项目实现】
由于是要实现一个网页搜索引擎，所以我们需要借用网页三剑客（Html+Css+Javascript）,然后实现这一功能。
1.打开百度分析网页结构
我们可以先看看百度的搜索引擎：
可以看到，这个搜索框的部分设置，比如关闭自动完成功能。然后我们在随便搜索内容来查看它的变化：
image
可以看到某些我们查询的关键字，于是我们便发现了请求规律：
https://www.baidu.com/s?+查询字符参数这就构成了我们的一个完整的get请求，而且这里面有很多关键字参数可以省略掉，只需要保留重要的一部分就好了。于是，经试验，得出如下结论：
https://www.baidu.com/s?wd=keyword这个才是请求的接口地址，只需将keyword参数替换为任意搜索关键字即可实现查询并跳转到相应结果页面。
2.编写Html输入框，搜索按钮
看过之前写的Html系列的文章，你将不再对此感到困惑。
<html>
<head>
<title></title>
<style type="text/css">
*{ 内外边距初始时为0
margin:0;
padding:0
}
input{
width:300px;
height:30px
}
span{
position:absolute; 绝对定位
background-color:red; 背景颜色
border:1px solid gray; 边框设置
width:60px;
height:32px;
text-align:center 文字位置
}
span:hover{ 鼠标悬停时的样式
background-color:blue
}
</style>
</head>
<body>
<input type="text" name="" placeholder="请输入要搜索的内容"> 文本框
<span>search</span> 搜索按钮
</body>
</html>编写完成后进入浏览器查看，即可看到：
可以看到，已经有点浏览器搜索框的意思了。
3.导入Jquery插件
<script src='jquery-3.2.1.min.js'></script>4.编写js脚本
这个是重中之重，打开浏览器，network,继续分析：
可以看到搜索结果就在里面。然后打开这个请求的url地址，经过多次实验，发现就只有图中标记的参数有变化：
image.png
所以我们可以得出结论，我们只需要改变这两个值即可。
1).创建删除脚本
于是我先创建一个脚本标签，不用它的时候随时可以清除，避免占用内存，导致页面打开迟缓，性能降低：
var script=document.createElement('script'); 创建script的标签
script.id='jsonp'; 设置id为jsonp
script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd; 设置它的地址
document.body.appendChild(script); 添加script元素到body中然后等它不用了，随时将它删除：
var script=document.createElement('script'); 创建script的标签
script.id='jsonp'; 设置id为jsonp
script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd; 设置它的地址
document.body.appendChild(script); 添加script元素到body中2).生成选项下拉菜单
我们在浏览器可以看到，只要一输入文本，它就会弹出对应的选项让我们选择，那么这是如何办到的了？
<script>
function getlist(wd){ /*获取下拉列表*/
var script=document.createElement('script'); /*创建script的标签*/
script.id='jsonp'; /*设置id为jsonp*/
script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd; /* 设置它的地址*/
document.body.appendChild(script); /*添加script元素到body中*/
}
function getData(data){ /*获取数据*/
var script=document.querySelector('#jsonp'); /*选择id为jsonp的元素*/
script.parentNode.removeChild(script); /*从这个元素的父元素中删除这个元素*/
$('ol').html(''); /* 设置有序列表的值为空*/
var da=data.g; /* 获取搜索的结果*/
if(da){ /*结果存在的话就将结果放到li标签中*/
da.forEach(function(item,index){
$('<li><a target="_blank" href ="https://www.baidu.com/s?wd='+item.q+'">'+item.q+'</a></li>').appendTo('ol');
})
}
}
/* 判断键盘是否按下*/
$('input:text').keyup(function(){
var wd=$(this).val(); /* 输入框的值*/
if(wd==''){ /*如果值是空，那么就隐藏，否则显示*/
$('ol').css('display','none');
$('ol').css('zIndex',-10);
}else{
$('ol').css('display','block');
$('ol').css('zIndex',20);
}
getlist(wd);
});
</script>可以看到，搜索结果已经出来了，而且有序列表下的"li"标签也都对应的生成了。
3).给选项标记序列
我们可以看到，结果终于出来，但是我想给它个序列号，这样就可以知道搜索结果有多少个了。要设置的标记方式有很多种，可以以数字开头，也可以是大小写字母或者罗马时间。在这里我选择数字，很简单。
终于非常完美的实现了这一功能，是不是很惊艳了，赶快去试下吧。
4).搜索刷新
看到这里相信大家应该都知道这个功能已经算是完成了，我们只需要随便点击哪个li标签都可以访问到相应的页面。于是，我决定添加一个刷新的功能，属于重连服务器的那种刷新：
<span onclick='window.location.reload()'>search</span> 点击后立即刷新【三、项目总结】
总的来说，对于初学者小白是个很不错的练手项目，希望大家能从中有所收获。
需要源码的小伙伴，后台回复“搜索引擎”四个字即可获取。
****看完本文有收获？请转发分享给更多的人****
想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/
相关推荐
- 用AI软件在线批量查询快递动态，依关键字一键查指定单号
-
还在一个个复制粘贴快递单号？还在海量物流信息里找得眼花缭乱？首助编辑高手给你带来快递查询新姿势！AI加持的批量查询功能，不仅能同时追踪上百个快递动态，更能通过关键字一键锁定目标单号，就像给快递装了GP...
- 掌握Filter函数:轻松实现关键字模糊查找技巧
-
在工作中，我们需要根据某个关键字来查找相关的数据。比如，你想知道姓“李”的人员信息，或者姓“张”相关的信息。这时，我们就需要用到Excel中的模糊查询功能。...
- 关键字（关键字名词解释）
-
敬请老师批改。七律：普通人的命运或（命运）人生苦短命不同，有贫有富命多种。粗茶淡饭无痒痛，早鱼晚肉腹脂中。辛勤劳作身强健，空闲玩乐病多连。，...
- 装修网购省钱技巧，搜索“原产地+关键词”，能省好几万
-
砸锅卖铁买套房，谁能想到啊，后期装修如此烧钱，230万都不一定够。所以啊，装修买东西，能省则省，我推荐大家网购，比实体店便宜很多。不过大家网购注意技巧，搜索“产地+关键词”，这样既保证了价格便宜，而...
- Excel快速定位关键词所在行号列号，告别繁琐手动查找!
-
我是【桃大喵学习记】，欢迎大家关注哟~，每天为你分享职场办公软件使用技巧干货！——首发于微信号：桃大喵学习记今天跟大家分享的是在Excel中快速查找关键词所在行号列号，通过精妙的公式组合可以快速定位关...
- 亚马逊快速寻找关键词的方法（亚马逊怎么快速找关键词）
-
亚马逊写链接需要找到精准关键词，先找到8-10个同行链接的asin图2，图3，粘贴到集合链接搜索狂框内，图4，所有同行链接都出现在亚马逊前天界面，这时候直接把同行链接标题里面的精准关键词扣下来进行排列...
- 干货收藏!高考填报志愿要了解的16个关键词
-
2024年高考已落下帷幕，考生即将面临志愿填报。什么是批次录取控制分数线？什么是院校调档分数线？平行志愿和顺序志愿有什么区别？16个关键词帮你了解高考志愿填报，转存！@人民日报来源：上海发布...
- 标品必看，关键词抢位助手的玩法（抢注关键词）
-
但凡是一个标品，那你一定知道展现的位置直接影响点击率和转化率。...
- 这16个关键词，高考报志愿一定要了解!
-
2024年高考已落下帷幕考生即将面临志愿填报什么是批次录取控制分数线？什么是院校调档分数线？平行志愿和顺序志愿有什么区别？16个关键词了解高考志愿填报↓↓转自人民日报微博来源：沈阳日报...
- 在 Excel 表格中模糊查找关键字，简配高配方法都有了
-
很多同学会觉得Excel单个案例讲解有些碎片化，初学者未必能完全理解和掌握。不少同学都希望有一套完整的图文教学，从最基础的概念开始，一步步由简入繁、从入门到精通，系统化地讲解Excel的各个知...
- 找到自己人生的关键词（找到自己的人生价值）
-
找到自己人生基因上的东西，再专注他，放大他。人生不是庸庸碌碌的，如能在很早时就找到自己刻在骨子里的东西，那就是莫大的喜悦。人生的上半场是用来尝试，寻找的，人生中半场是用来找到自己的关键词，不要多一个足...
- 干货收藏!高考报志愿要了解的16个关键词
-
2024年高考已落下帷幕，考生即将面临志愿填报。什么是批次录取控制分数线？什么是院校调档分数线？平行志愿和顺序志愿有什么区别？16个关键词了解高考志愿填报！（人民日报）来源：河北新闻网...
- Excel多条件筛选别硬扛!FILTER函数3秒搞定N个关键字
-
今天咱们要攻克一个让无数据人头疼的难题：...
- 按关键字提取数据，学会方法很简单
-
小伙伴们好啊，今天咱们分享一个常见的数据提取问题——按关键字提取数据。...
- 告别熬夜整理!你的AI知识库该学会自己”觅食”了:关键词自动检索+资料归档+整理汇报
-
在信息爆炸的时代，整理和管理知识成为了一项艰巨的任务。本文将介绍如何利用AI技术，让知识库能够自动“觅食”，实现关键词自动检索、资料归档和整理汇报。之前分享过产品经理怎么用AI搭建你的专属知识库？（保...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 网站建设 (107)
- 网站开发 (47)
- 网络推广哪个平台好 (47)
- 百度收录 (50)
- 搜索引擎排名优化 (49)
- 关键词优化工具 (51)
- 外贸网站建设 (56)
- seo整站优化吧 (50)
- 广州seo (47)
- 苏州网站建设 (59)
- 百度搜索推广 (61)
- 关键词优化公司 (51)
- 网页制作 (47)
- 广州网站建设 (48)
- 电商网站建设 (49)
- 百度站长平台 (48)
- 网站模板 (51)
- 厦门网站建设 (52)
- 百度快照推广 (51)
- 免费网页在线客服系统 (53)
- 雷神代刷网站推广 (53)
- 长尾关键词 (47)
- 手机网站建设 (53)
- 网站维护 (53)
- 网页制作教程 (66)