前端之家收集整理的这篇文章主要介绍了
基于vue实现多引擎搜索及关键字提示，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
本文实例为大家分享了vue实现多引擎搜索及关键字提示的具体代码，供大家参考，具体内容如下
关键代码：
"+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;
}
},
