基於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 "+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 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請求參數：

輸入框中有文字的時候觸發。

其中JSON.parse用於從一個字串中解析出json物件。 s是suggest words。這裡傳到autoDisplay的參數即關鍵字提示。

將獲取到的關鍵字提示放到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; } } },

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