基于vue实现多引擎搜索及关键字提示
更新时间：2017年03月16日 11:16:15 作者：Redchar
这篇文章主要为大家详细介绍了基于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;
}
},
多引擎搜索很简单，匹配对应参数就好：
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请求参数：
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");
});
输入框中有文字的时候触发。
其中JSON.parse用于从一个字符串中解析出json对象。s是suggest words。这里传到autoDisplay的参数即关键字提示。
另外将input元素的autocomplete属性设置为off可以关闭自动提示：
<input type="text" name="name" autocomplete="off">
如果所有表单元素都不想使用自动提示功能，只需在表单form上设置autocomplete=off。
最后将获取到的关键字提示放到input下面的节点中即可。
注意：
复制代码 代码如下:
<input id="searchData" type="text" placeholder="搜索一下" name="word" @keyup="listenWords" @input="listenInput" @focus="listenInput" />
这里因兼容问题绑定了3个事件，其中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();
}
}
},
如有更好的方式欢迎讨论。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
基础组件开发是项目业务开发的基石, 本文主要介绍了通过vue3的vite脚手架快速搭建项目, 开发条形码和二维码组件的过程,感兴趣的朋友跟随小编一起看看吧2023-08-08
不知道你有没有发现Bing AI聊天有个输入提示功能,在用户输入部分内容时后面会给出灰色提示文案,用户只要按下tab键就可以快速添加提示的后续内容,我将这个功能称为幽灵建议,接下来我将用Vue框架来实现这个功能,需要的朋友可以参考下2023-09-09
常见的文件上传方式可能就是new一个FormData，把文件append进去以后post给后端就可以了。但如果采用这种方式来上传大文件就很容易产生上传超时的问题。所以本文将利用Vue+NodeJS实现大文件上传，需要的可以参考一下2022-05-05
vue开发h5项目特别是移动端的项目，很多都是打包后挂载在原生APP上的，这篇文章主要介绍了vue与原生app的对接交互的方法，非常具有实用价值，需要的朋友可以参考下2018-11-11
搭建vue3项目以及按需引入element-ui框架组件全过程
element是基于vue.js框架开发的快速搭建前端的UI框架,下面这篇文章主要给大家介绍了关于搭建vue3项目以及按需引入element-ui框架组件的相关资料,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下2024-02-02
这篇文章主要为大家详细介绍了vue中使用stompjs实现mqtt消息推送通知，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要为大家介绍了Backbone前端框架核心及源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
vue.js是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计.这篇文章主要介绍了VueJs 填坑日记之初识 *.Vue文件,需要的朋友可以参考下2017-11-11
这篇文章主要为大家详细介绍了vuedraggable实现拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要给大家详细介绍一下Vue3中的基本语法，文中的示例代码讲解详细，对我们学习Vue3有一定的帮助，感兴趣的小伙伴可以了解一下2022-11-11
最新评论