<fieldset id="goss0"></fieldset>

      
        
          
        
        
        ×
        
          
        
      
    

fillUrls: function() {
        var that = this;
        var strdomin = document.getElementById("searchData").value;
        window.status = "請求中";
        this.$http.jsonp("http://suggestion.baidu.com/su", {  //請求參數(shù)
          params: {
           wd: strdomin
          },
          jsonp: 'cb'
        }).then(function(res){
          window.status = "請求結(jié)束";
          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++) {
          //創(chuàng)建節(jié)點
          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;
          }
          //針對手機豎屏?xí)r的顯示條數(shù)控制
          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;
        }
      },

多引擎搜索很簡單，匹配對應(yīng)參數(shù)就好：

window.location. + document.getElementById("searchData").value;

百度：https://m.baidu.com/s?word=

谷歌：https://www.google.com/search?q=

必應(yīng)：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=

關(guān)鍵字提示，先通過jsonp請求參數(shù)：

var strdomin = document.getElementById("searchData").value;
        window.status = "請求中";
        this.$http.jsonp("http://suggestion.baidu.com/su", {  //請求參數(shù)
          params: {
           wd: strdomin
          },
          jsonp: 'cb'
        }).then(function(res){
          window.status = "請求結(jié)束";
          that.autoDisplay(JSON.parse(res.body).s);
        },function(){
          console.log("error");
        });

輸入框中有文字的時候觸發(fā)。

其中JSON.parse用于從一個字符串中解析出json對象。s是suggest words。這里傳到autoDisplay的參數(shù)即關(guān)鍵字提示。

另外將input元素的autocomplete屬性設(shè)置為off可以關(guān)閉自動提示：

如果所有表單元素都不想使用自動提示功能，只需在表單form上設(shè)置autocomplete=off。

最后將獲取到的關(guān)鍵字提示放到input下面的節(jié)點中即可。

注意：

復(fù)制代碼 代碼如下:

這里因兼容問題綁定了3個事件，其中l(wèi)istenWords專門針對手機鍵盤的回車鍵和回退鍵：

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

以上是“vue怎么實現(xiàn)多引擎搜索及關(guān)鍵字提示”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。