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

网友投稿 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小时内删除侵权内容。

上一篇:Java设计模式之单例模式详解
下一篇:es6的数字处理的方法(5个)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~