javascript|自己用js做一个搜索栏，超级简单 ecmascript|开发语言

csdn很少上线，经常在掘金摸鱼，本文掘金链接https://juejin.cn/post/7058602557987356708
言归正传：
为什么要做这个小案例呢？
首先我有极度严重的强迫症，对于设备交互界面的追求是越整洁越好，另外由于我的专业原因，需要经常不断地跨平台搜索各种资料，所以我作做了一个结合百度、bing、Yandex、掘金、CSDN等于一体的搜索栏。
看看百度的搜索页

文章图片

百度算是好的，有的搜索引擎一打开全是广告和弹窗，比如QQ浏览器。。。。
为了还自己一个干净的界面，同时提高搜索效率，于是我自己做了一个（下图）

我知道有很多大佬做过类似的浏览器插件，但是我做的这个是一个纯网页的，不需要大家安装，也没太多花里胡哨的内容（更轻便）
实现原理
主要技术路线：网页页面跳转window.location.href
思路：
1、怎么将输入的内容提交到指定的平台百度为例：当我们搜索“你好”时

文章图片

地址栏地址：https://www.baidu.com/s?wd=你好
https是通信协议
【javascript|自己用js做一个搜索栏，超级简单】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代码都很重要，所以重点分享这两个文件

> if (window.navigator.userAgent.match(/Android|iPhone|iPad/)) { window.location.href = 'https://www.it610.com/article/m.index.html'; } else { console.log('pc端'); } QHX-聚合搜索文章图片 name="" id=""> src="https://www.it610.com/article/js/index.js">

//获取搜索按钮 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 = https://www.it610.com/article/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.background let 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