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

如有更好的方式歡迎討論。