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

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

言归正传：

为什么要做这个小案例呢？

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

看看百度的搜索页

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

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

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

实现原理

主要技术路线：网页页面跳转window.location.href
思路：

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

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

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

https是通信协议

www.baidu.com是网址（域名）

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

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

2、找规律

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

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

其他平台（如图）

3、写代码

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

<!DOCTYPE html>
<html lang="cn">
<!-- 以下js实现的是判断用户是不是使用的移动端，如果是移动端就跳转到移动端的HTML页面 -->
<script>if (window.navigator.userAgent.match(/Android|iPhone|iPad/)) {window.location.href = 'm.index.html';} else {console.log('pc端');}
</script><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>QHX-聚合搜索</title><link rel="stylesheet" href="./css/index.css">
</head>
<body><div class="imgbox"><img src="./images/2022.png" alt=""></div><div id="data"><select name="" id=""><!-- 我将各个平台的域名和搜索关键字都放在了下拉框的value中，方便后面js获取，另外一定给某一平台添加默认选中状态 --><option value="https://www.baidu.com/s" selected>百度</option><option value="https://cn.bing.com/search">BING</option><option value="https://yandex.com/search/">Yandex</option><option value="https://juejin.cn/search">掘金</option><option value="https://zzk.cnblogs.com/s">博客园</option><option value="https://www.jianshu.com/search">简书</option><option value="https://so.csdn.net/so/search">CSDN</option><option value="https://www.51yuansu.com/index.php">觅元素</option><option value="https://www.aigei.com/s">爱给网素材</option><option value="https://search.bilibili.com/all">B站</option><option value="https://www.haiantv.cc/word">影视一键搜</option></select><input type="text" name="" id="text"><button class="label" type="button">搜索</button></div><!-- 引入功能实现js --><script src="./js/index.js"></script>
</body>
</html>

//获取搜索按钮
const btn = document.querySelector('.label');
//获取下拉框，方便后期判断用户选择的搜索平台
const point = document.querySelector('select');
//获取input框
const texts = document.querySelector('#text');//将所有平台的搜索关键字端，存入数组
const arr = ['wd', 'q', 'text', 'query', 'w', 'keyword', 'm=Index&a=fenlei&k'];//搜索按钮被点击以后要做的事情
btn.onclick = function() {//获取下拉框用户选中的内容const p = point.value;//获取输入框中，用户输入放入内容const text = texts.value;//声明一个空字符串let str = '';//以下所有的if语句是用来判断下拉框选项中是否包含平台域名关键字的，如果有if (p.includes('baidu')) {//就拼接？+搜索关键字段+ ‘=’ + 用户搜索内容//例如这里是百度，那么拼接的结果就是  ?wd=你好str = '?' + arr[0] + '=' + text;}if (p.includes('bing')) {str = '?' + arr[1] + '=' + text;}if (p.includes('yandex')) {str = '?' + arr[2] + '=' + text;}if (p.includes('juejin')) {str = '?' + arr[3] + '=' + text;}if (p.includes('cnblogs')) {str = '?' + arr[4] + '=' + text;}if (p.includes('jianshu')) {str = '?' + arr[1] + '=' + text;}if (p.includes('csdn')) {str = '?' + arr[1] + '=' + text;}if (p.includes('yuansu')) {str = '?' + arr[6] + '=' + text;}if (p.includes('aigei')) {str = '?' + arr[1] + '=' + text;}if (p.includes('bilibili')) {str = '?' + arr[5] + '=' + text;}if (p.includes('haiantv')) {str = '/' + text + '/';alert('该搜索比较缓慢，请您耐心等待');}console.log(p + str);//最后我们利用页面跳转，跳转到指定的平台域名+搜索字段，就可以实现了window.location.href = p + str;
}//这里是判断用户选中的是不是觅元素，如果是，就要提示用户，需要输入拼音搜索
point.onchange = function() {const p = point.value;if (p.includes('yuansu')) {texts.setAttribute('placeholder', '觅元素搜索请输入拼音，如：你好输入nihao');}
}//当用户点击确定（enter）键后，让搜索按钮模拟被点击
document.onkeyup = function(e) {if (e.keyCode == 13) {btn.click();}
}//如果是pc端，就启动背景切换
if (window.navigator.userAgent.match(/Windows/)) {document.body.backgroundlet index = 1;setInterval(() => {index++;if (index > 5) {index = 1;document.body.style.background = `url(../images/beijing${index}.jpg)no-repeat center center/100% 100%`;} else {document.body.style.background = `url(../images/beijing${index}.jpg)no-repeat center center/100% 100%`;}}, 10000);
}

以上就是本文的全部内容。
本文掘金链接https://juejin.cn/post/7058602557987356708