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

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

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


我知道有很多大佬做过类似的浏览器插件,但是我做的这个是一个纯网页的,不需要大家安装,也没太多花里胡哨的内容(更轻便)
实现原理
主要技术路线:网页页面跳转window.location.href
思路:
1、怎么将输入的内容提交到指定的平台 百度为例:当我们搜索“你好”时
javascript|自己用js做一个搜索栏,超级简单
文章图片

地址栏地址: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=
其他平台(如图)
javascript|自己用js做一个搜索栏,超级简单
文章图片

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-聚合搜索 - 锐客网
javascript|自己用js做一个搜索栏,超级简单
文章图片
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

    推荐阅读