基于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://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请求参数：

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();
   }
 }
      },

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

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