Flask接口签名sign原理与实例代码浅析
385
2023-06-02
基于vue实现多引擎搜索及关键字提示
本文实例为大家分享了vue实现多引擎搜索及关键字提示的具体代码,供大家参考,具体内容如下
关键代码:
快速搜索:
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,""+searchText.value+"");
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://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可以关闭自动提示:
如果所有表单元素都不想使用自动提示功能,只需在表单form上设置autocomplete=off。
最后将获取到的关键字提示放到input下面的节点中即可。
注意:
复制代码 代码如下:
这里因兼容问题绑定了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();
}
}
},
如有更好的方式欢迎讨论。
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~