本文实例为大家分享了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>

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

                </a>
            </form>
        </div>
        <div id="pagesZone" class="clearfix">
            <div id="auto"></div>
            快速搜索:
            <img src="../../distgoogle.png" alt="谷歌" id="googlePages" @click="gotoGoogle" >
            <img src="../../disting.png" alt="必应" id="bing" @click="gotoBing" >
            <img src="../../distzhihu.png" alt="知乎" id="zhihu" @click="gotoZhiHu" >
            <img src="../../distsogou.png" alt="搜狗" id="sogo" @click="gotoSogou" >
            <img src="../../distjd.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;
                }
            },
<div class="header-search">
      <form id="form" action="http://m.baidu.com/s" method="get" accept-charset="utf-8" class="clearfix" autocomplete="off">
        <a>

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

        </a>
      </form>
    </div>
    <div id="pagesZone" class="clearfix">
      <div id="auto"></div>
      快速搜索:
      <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;

window.location.href =
“” +
document.getElementById(“searchData”).value;

百度:

百度:永利开户送38元体验金,=

谷歌:

谷歌:=

必应:

必应:=

知乎:

知乎:=

搜狗:

搜狗:=

京东:

京东:=

 

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

关键字提示,先通过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");
        });
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的参数即关键字提示。

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

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

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

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

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

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

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

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

注意:

 

复制代码 代码如下:

注意,

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

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

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

这里因兼容问题绑定了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();
          }
        }
      },
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
    仿百度搜索功能实现代码
  • 基于Vue.js实现简单搜索框
  • Vue.js实现实例搜索应用功能详细代码
  • vue2 前端搜索实现示例
  • 基于Vue.js
    2.0实现百度搜索框效果
  • 基于Vuejs的搜索匹配功能实现方法

相关文章