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

前端之家收集整理的这篇文章主要介绍了基于vue实现多引擎搜索及关键字提示前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

关键代码

@H_502_7@
502_7@ 快速搜索 谷歌 必应 知乎 搜狗 京东
"+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; } },

多引擎搜索很简单,匹配对应参数就好:

百度:=

谷歌:=

必应:=

知乎:=

搜狗:=

京东:=

关键字提示,先通过jsonp请求参数:

输入框中有文字的时候触发。

其中JSON.parse用于从一个字符串中解析出json对象。s是suggest words。这里传到autoDisplay的参数即关键字提示。

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

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

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

注意:

代码如下:@H_502_7@
@H_502_7@

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

@H_502_7@

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章