溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下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怎么實現多引擎搜索及關鍵字提示”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
