Vue实现多引擎搜索跳转与关键字自动提示功能
本文介绍如何在Vue中实现多搜索引擎跳转与关键字自动提示功能。通过拼接不同搜索引擎的URL参数实现一键跳转，并利用JSONP请求百度接口获取建议词。同时解析input事件与键盘按键，处理回车搜索与退格逻辑，结合autocomplete属性优化用户体验。
Vue多引擎搜索与关键字提示实现
本文分享了一个使用Vue技术实现多搜索引擎跳转及输入框关键字自动提示的具体代码示例，供开发者参考。
核心实现逻辑如下：
多搜索引擎跳转逻辑
<div class="header-search">
<form id="form" action="http://m.baidu.com/s" method="get" accept-charset="utf-8" class="clearfix" autocomplete="off">
<a>
<span class="search-media"></span>
</a>
<input id="searchData" type="text" placeholder="搜索一下" name="word" @keyup="listenWords" @input="listenInput" @focus="listenInput" />
<span class="del">×</span>
<a @click="gotoSearch">
<span class="icon-search icon-sign"></span>
</a>
</form>
</div>
<div id="pagesZone" class="clearfix">
<div id="auto"></div>
<span class="engi">快速搜索：</span>
<img src="../../dist/images/google.png" alt="谷歌" id="googlePages" @click="gotoGoogle" >
<img src="../../dist/images/bing.png" alt="必应" id="bing" @click="gotoBing" >
<img src="../../dist/images/zhihu.png" alt="知乎" id="zhihu" @click="gotoZhiHu" >
<img src="../../dist/images/sogou.png" alt="搜狗" id="sogo" @click="gotoSogou" >
<img src="../../dist/images/jd.png" alt="京东" id="jd" @click="gotoJD" >
<a @click="close" class="close">关闭</a>
</div>
关键字自动提示功能实现
fillUrls: function() {
var that = this;
var strdomin = document.getElementById("searchData").value;
window.status = "请求中";
this.$http.jsonp("http://suggestion.baidu.com/su", { //请求参数
params: {
wd: strdomin
},
jsonp: 'cb'
}).then(function(res){
window.status = "请求结束";
that.autoDisplay(JSON.parse(res.body).s);
},function(){
console.log("error");
});
},
autoDisplay: function(autoStr) {
var searchText = document.getElementById('searchData');
var autoNode = document.getElementById('auto'); //缓存对象（弹出框）
var that = this;
var docWidth = document.body.clientWidth || document.documentElement.clientWidth;
var pagesZone = document.getElementById('pagesZone');
if (autoStr.length == 0) {
console.log("false");
autoNode.style.display = "none";
return false;
}
autoNode.innerHTML = "";
for (var i = 0; i < autoStr.length; i++) {
//创建节点
var wordNode = autoStr[i].replace(searchText.value,"<b>"+searchText.value+"</b>");
var newDivNode = document.createElement('div');
newDivNode.setAttribute("id",i);
autoNode.appendChild(newDivNode);
var wordSpanNode = document.createElement('span');
wordSpanNode.setAttribute('class','suggText');
wordSpanNode.innerHTML = wordNode;
newDivNode.appendChild(wordSpanNode);
var addNode = document.createElement('span');
addNode.setAttribute('class','addText');
addNode.innerHTML = '+';
newDivNode.appendChild(addNode);
//鼠标点击文字上屏并搜索
wordSpanNode.onclick = function () {
this.highlightindex = this.parentNode.getAttribute('id');
var comText = autoNode.childNodes[this.highlightindex].firstChild.innerText;
autoNode.style.display = "none";
this.highlightindex = -1;
searchText.value = comText;
pagesZone.style.display = "none";
that.gotoSearch();
};
//鼠标点击文字上屏
addNode.onclick = function () {
this.highlightindex = this.parentNode.getAttribute('id');
var comText = autoNode.childNodes[this.highlightindex].firstChild.innerText;
autoNode.style.display = "none";
this.highlightindex = -1;
searchText.value = comText;
};
//展示
if (autoStr.length > 0) {
autoNode.style.display = "block";
} else {
autoNode.style.display = "none";
this.highlightindex = -1;
}
//针对手机竖屏时的显示条数控制
if (docWidth < 500 && i > 3) {
break;
}
}
},
close: function() {
document.getElementById('pagesZone').style.display = 'none';
},
listenWords: function(event) {
console.log("listen keyup");
var that = this;
var searchInput = document.getElementById("searchData");
event = window.event || event;
if (event.keyCode == 13) { // enter
event.preventDefault();
that.gotoSearch();
}
if (event.keyCode == 8) { // backspace
console.log(searchInput.value.length);
if(searchInput.value.length == 0){
searchInput.blur();
searchInput.focus();
}
}
},
listenInput: function() {
var that = this;
var searchInput = document.getElementById("searchData");
var auto = document.getElementById('auto');
var pagesZone = document.getElementById('pagesZone');
var del = document.getElementsByClassName('del')[0];
if (searchInput.value == null || searchInput.value == "") {
auto.innerHTML = "";
pagesZone.style.display = "none";
del.style.display = "none";
auto.style.display = "none";
return;
}
pagesZone.style.display = "block";
del.style.display = "block";
that.fillUrls();
if (this.highlightindex != -1) {
this.highlightindex = -1;
}
},
实现多引擎搜索跳转相对简单，关键在于正确匹配各搜索引擎的URL参数格式。
以知乎为例，跳转链接拼接方式如下：window.location.href = "https://m.zhihu.com/search?q=" + document.getElementById("searchData").value;
其他搜索引擎的跳转链接格式分别为：百度为https://m.baidu.com/s?word=，谷歌为https://www.google.com/search?q=，必应为https://cn.bing.com/search?q=，知乎为https://m.zhihu.com/search?q=，搜狗为http://wap.sogou.com/web/searchList.jsp?keyword=，京东为http://so.m.jd.com/ware/search.action?keyword=。
关于关键字自动提示功能，首先需要通过JSONP方式向服务器请求相关参数数据。
当用户在输入框中输入文字时触发相应逻辑。
其中JSON.parse函数用于将返回的字符串解析为JSON对象，变量s代表建议词汇列表。此处传递给autoDisplay函数的参数即为获取到的关键字提示内容。
此外，可以通过将input元素的autocomplete属性设置为off来关闭浏览器自带的自动提示功能。
如果希望所有表单元素均不使用自动提示，只需在form标签上设置autocomplete=off即可。
最后，将获取到的关键字提示内容渲染到input元素下方的节点中即可展示。
var strdomin = document.getElementById("searchData").value;
window.status = "请求中";
this.$http.jsonp("http://suggestion.baidu.com/su", { //请求参数
params: {
wd: strdomin
},
jsonp: 'cb'
}).then(function(res){
window.status = "请求结束";
that.autoDisplay(JSON.parse(res.body).s);
},function(){
console.log("error");
});
注意事项：
具体代码实现如下：
<input id="searchData" type="text" placeholder="搜索一下" name="word" @keyup="listenWords" @input="listenInput" @focus="listenInput" />
<input type="text" name="name" autocomplete="off">
出于兼容性的考虑，此处绑定了三个事件。其中listenWords方法专门用于处理手机键盘的回车键和退格键操作。
如有更优的实现方案，欢迎交流讨论。
以上就是本文的全部内容，希望对各位的学习有所帮助，也希望大家多多支持本站。
复制代码
<input id="searchData" type="text" placeholder="搜索一下" name="word" @keyup="listenWords" @input="listenInput" @focus="listenInput" />此处因兼容性问题绑定了三个事件，其中 listenWords 专门用于处理手机键盘的回车键与退格键：
输入框事件处理与兼容性
listenWords: function(event) {
console.log("listen keyup");
var that = this;
var searchInput = document.getElementById("searchData");
event = window.event || event;
if (event.keyCode == 13) { // enter
event.preventDefault();
that.gotoSearch();
}
if (event.keyCode == 8) { // backspace
console.log(searchInput.value.length);
if(searchInput.value.length == 0){
searchInput.blur();
searchInput.focus();
}
}
},
若存在更优方案，欢迎交流讨论。
本文内容至此结束，希望能为您的学习提供助力，同时也期待您的持续关注与支持。
Vue前端日历插件VCalendar集成与使用指南
2026-10-31 18:16:55
uniapp scroll-view 组件实战：Vue3 改造与滚动逻辑详解
2026-10-31 14:49:47
ElementUI el-calendar 周月视图切换与自定义实现
2026-10-31 14:48:43
Vue Element UI 结合 sortable.js 实现嵌套表格行内拖拽排序
2026-10-31 13:57:34
el-input 限制输入只允许输入浮点型的解决思路
2026-10-31 12:30:12