基于vue实现多引擎搜索及关键字提示
程序员文章站
2022-06-14 11:36:48
本文实例为大家分享了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;
百度：=
谷歌：=
必应：=
知乎：=
搜狗：http://wap.sogou.com/web/searchlist.jsp?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();
}
}
},
如有更好的方式欢迎讨论。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。