我做的这个东西，简单来说，就是通过一个统一的搜索框，点击搜索即可进入各大网站的搜索页面，不用先进入那些网站首页再找到他们的搜索框输入关键词搜索。

我做这个是受北邮人导航启发。下图就是北邮人导航网页截图。

去年看到的时候这个网站的时候，我觉得多此一举，完全没必要。以淘宝搜索来说，进入这个搜索导航搜索需要先打开一次网站首页，进入淘宝网站搜索也是先打开一次网站首页，操作完全一样，完全没必要用这个导航。

我也基本上没有需要同时搜索几个网站的需求，所以也没怎么在意。

但是，我慢慢发现打开目标网站首页和打开一个搜索框网站首页真的不一样，尤其是电脑配置不高或者网速不好的情况下，打开购物或者视频网站往往要等几秒甚至十多秒加载完成输入框才能输入，真的太慢了，有时候突然想起一个东西想搜索，等它网站首页加载好的时候我已经忘记想搜什么了。

相比之下，可以秒开的搜索框网页，优势明显。

于是我做了这个搜索框导航，页面内容很简单，一个搜索框和一堆网站按钮。不过，网站按钮只是看起来是按钮，实际是 a 标签超链接，当输入框为空时链接是目标网站的首页地址，当你输入关键词后链接就会变成目标网站的站内搜索地址。

这是输入框为空时，注意看左下角链接，此时是目标网站首页地址。

这是输入关键词后，注意看左下角链接，此时是目标网站站内搜索地址。

输入关键词后，所有网站按钮链接都变成了此关键词在该网站的搜索地址。

由于是 a 超链接，按住 Ctrl 键点击不同网站按钮可以实现快速不同网站搜索。

为了方便输入，我还通过百度 opensug.js 提供了百度的搜索提示。

探讨

目前实现的功能就这么一个，我还计划添加拖拽图片进来时提供百度、谷歌、淘宝、京东等图片搜索功能。

此外，现有的网站列表只是我目前想到一些常用网站，还有很多网站没添加进来，比如说 Github，我计划建立几个网站列表，面向不同用户群体，允许用户自行切换和添加网站。

值得一说的是，Vue.js 双向绑定真的挺好用，不信你打开网站后 F12 进入 console 控制台，输入下面这行代码，就可以在第一列网站列表后面添加 Github 站内搜索。不过，网页刷新后就没有了，因为现在还没有添加保存功能。

menshenAPP.buttons.engine.push({name:'GitHub', home:'https://github.com/', queryUrl:'https://github.com/search?utf8=%E2%9C%93&q=%s&type=' })

这个项目是纯前端项目，将来添加的自定义功能的修改数据默认只是使用 localStorage 保存在客户端。不过，我准备在完成图片搜索功能后把所有代码发布到 Github 开源，提供给大家搭建适合自己的搜索框。

我介绍完了。

请 V 站的汉子和妹子们给点建议和帮助，期待你们能帮忙丰富网站列表和完善代码。

做了一个搜索框可以快速进入各大网站搜索，请 V 站汉子妹子指教