微客导航 » 文章资讯 » 基于vue实现多引擎搜索及关键字提示

基于vue实现多引擎搜索及关键字提示

2024-02-27 11:21:06 288

本文实例为大家分享了vue实现多引擎搜索及关键字提示的具体代码，供大家参考，具体内容如下

关键代码：

×

快速搜索：关闭

fillUrls:function(){
varthat=this;
varstrdomin=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){
varsearchText=document.getElementById('searchData');
varautoNode=document.getElementById('auto');//缓存对象（弹出框）
varthat=this;
vardocWidth=document.body.clientWidth||document.documentElement.clientWidth;
varpagesZone=document.getElementById('pagesZone');
if(autoStr.length==0){
console.log("false");
autoNode.style.display="none";
returnfalse;
}
autoNode.innerHTML="";
for(vari=0;i"+searchText.value+"");
varnewDivNode=document.createElement('div');
newDivNode.setAttribute("id",i);
autoNode.appendChild(newDivNode);
varwordSpanNode=document.createElement('span');
wordSpanNode.setAttribute('class','suggText');
wordSpanNode.innerHTML=wordNode;
newDivNode.appendChild(wordSpanNode);
varaddNode=document.createElement('span');
addNode.setAttribute('class','addText');
addNode.innerHTML='+';
newDivNode.appendChild(addNode);
//鼠标点击文字上屏并搜索
wordSpanNode.onclick=function(){
this.highlightindex=this.parentNode.getAttribute('id');
varcomText=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');
varcomText=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("listenkeyup");
varthat=this;
varsearchInput=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(){
varthat=this;
varsearchInput=document.getElementById("searchData");
varauto=document.getElementById('auto');
varpagesZone=document.getElementById('pagesZone');
vardel=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请求参数：

varstrdomin=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是suggestwords。这里传到autoDisplay的参数即关键字提示。

另外将input元素的autocomplete属性设置为off可以关闭自动提示：

如果所有表单元素都不想使用自动提示功能，只需在表单form上设置autocomplete=off。

最后将获取到的关键字提示放到input下面的节点中即可。

注意：

这里因兼容问题绑定了3个事件，其中listenWords专门针对手机键盘的回车键和回退键：

listenWords:function(event){
console.log("listenkeyup");
varthat=this;
varsearchInput=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();
}
}
},

如有更好的方式欢迎讨论。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

基于vue实现多引擎搜索及关键字提示

热门推荐

随机推荐