亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue怎么實現多引擎搜索及關鍵字提示

發布時間:2021-04-23 14:01:09 來源:億速云 閱讀:356 作者:小新 欄目:web開發

小編給大家分享一下vue怎么實現多引擎搜索及關鍵字提示,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創建可維護性和可測試性更強的代碼庫,Vue允許可以將一個網頁分割成可復用的組件,每個組件都包含屬于自己的HTML、CSS、JavaScript,以用來渲染網頁中相應的地方,所以越來越多的前端開發者使用vue。

具體內容如下

關鍵代碼:

<div class="header-search">
      <form id="form" action="http://m.baidu.com/s" method="get" accept-charset="utf-8" class="clearfix" autocomplete="off">
        <a>
          <span class="search-media"></span>
        </a>
        <input id="searchData" type="text" placeholder="搜索一下" name="word" @keyup="listenWords" @input="listenInput" @focus="listenInput" />
        <span class="del">×</span>
        <a @click="gotoSearch">
          <span class="icon-search icon-sign"></span>
        </a>
      </form>
    </div>
    <div id="pagesZone" class="clearfix">
      <div id="auto"></div>
      <span class="engi">快速搜索:</span>
      <img src="../../dist/images/google.png" alt="谷歌" id="googlePages" @click="gotoGoogle" >
      <img src="../../dist/images/bing.png" alt="必應" id="bing" @click="gotoBing" >
      <img src="../../dist/images/zhihu.png" alt="知乎" id="zhihu" @click="gotoZhiHu" >
      <img src="../../dist/images/sogou.png" alt="搜狗" id="sogo" @click="gotoSogou" >
      <img src="../../dist/images/jd.png" alt="京東" id="jd" @click="gotoJD" >
      <a @click="close" class="close">關閉</a>
    </div>
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,"<b>"+searchText.value+"</b>");
          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可以關閉自動提示:

<input type="text" name="name" autocomplete="off">

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

最后將獲取到的關鍵字提示放到input下面的節點中即可。

注意:

復制代碼 代碼如下:

<input id="searchData" type="text" placeholder="搜索一下" name="word" @keyup="listenWords" @input="listenInput" @focus="listenInput" />

這里因兼容問題綁定了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();
          }
        }
      },

以上是“vue怎么實現多引擎搜索及關鍵字提示”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

vue
AI

西和县| 邳州市| 咸阳市| 巧家县| 张北县| 双鸭山市| 慈溪市| 彭水| 新田县| 黄浦区| 新竹县| 砚山县| 扶余县| 长丰县| 碌曲县| 丹棱县| 浦东新区| 库车县| 娄底市| 安康市| 西林县| 霸州市| 葫芦岛市| 大名县| 包头市| 潜山县| 武鸣县| 靖边县| 公安县| 沙洋县| 延吉市| 腾冲县| 社旗县| 永胜县| 利津县| 泽普县| 上高县| 梨树县| 珠海市| 安吉县| 镇江市|