自己用js做一个搜索栏,超级简单

   日期:2024-11-07     作者:caijiyuan       评论:0    移动:http://mip.riyuangf.com/mobile/news/653.html
核心提示:csdn很少上线,经常在掘金摸鱼,本文掘金链接https://juejin.cn/post/7058602557987356708 言归正传: 为什么

csdn很少上线,经常在掘金摸鱼,本文掘金链接https://juejin.cn/post/7058602557987356708

自己用js做一个搜索栏,超级简单

言归正传

为什么要做这个小案例呢

首先我有极度严重的强迫症,对于设备交互界面的追求是越整洁越好,另外由于我的专业原因,需要经常不断地跨平台搜索各种资料,所以我作做了一个结合百度、bing、Yandex、掘金、CSDN等于一体的搜索栏。

看看百度的搜索页

图片.png 百度算是好的,有的搜索引擎一打开全是广告和弹窗,比如QQ浏览器。。。。

为了还自己一个干净的界面,同时提高搜索效率,于是我自己做了一个(下图

图片.png

图片.png

我知道有很多大佬做过类似的浏览器插件,但是我做的这个是一个纯网页的,不需要大家安装,也没太多花里胡哨的内容(更轻便

实现原理

主要技术路线:网页页面跳转 思路

1、怎么将输入的内容提交到指定的平台

百度为例:当我们搜索“你好”时

图片.png

地址栏地址:https://www.baidu.com/s?wd=你好

https是通信协议

www.baidu.com是网址(域名

那么后的s?wd=你好 是什么意思呢?我们不妨将浏览器的地址改为https://www.baidu.com/s?wd=世界

baidu.gif

原来 后面的字符对应的是我们需要搜索的内容,那我不就可以利用js将搜索栏的内容获取到后,做一个拼接,然后使用js跳转到拼接好的链接页面,就可以现实自制带有搜索功能的搜索栏了吗

2、找规律

有了上述的理论基础,尝试各个平台搜索方式后发现其实现方式与百度类似,但是其具体的实现方式是有区别的具体如下

平台域名搜索字段百度https://www.baidu.com/s?wd=必应https://cn.bing.com/search?q=简书https://www.jianshu.com/search?q=CSDNhttps://so.csdn.net/so/search?q=爱给网https://www.aigei.com/s?q=

其他平台(如图

图片.png

3、写代码

我认为这个案例的html和js代码都很重要,所以重点分享这两个文件

 
 
特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。

举报收藏 0打赏 0评论 0
 
更多>同类最新资讯
0相关评论

相关文章
最新文章
推荐文章
推荐图文
最新资讯
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号