基于vue實現(xiàn)多引擎搜索及關(guān)鍵字提示
本文實例為大家分享了vue實現(xiàn)多引擎搜索及關(guān)鍵字提示的具體代碼,供大家參考,具體內(nèi)容如下
關(guān)鍵代碼:
<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="必應(yīng)" 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">關(guān)閉</a> </div>
fillUrls: function() { var that = this; var strdomin = document.getElementById("searchData").value; window.status = "請求中"; this.$http.jsonp("http://suggestion.baidu.com/su", { //請求參數(shù) params: { wd: strdomin }, jsonp: 'cb' }).then(function(res){ window.status = "請求結(jié)束"; 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++) { //創(chuàng)建節(jié)點 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); //鼠標(biāo)點擊文字上屏并搜索 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(); }; //鼠標(biāo)點擊文字上屏 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; } //針對手機豎屏?xí)r的顯示條數(shù)控制 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; } },
多引擎搜索很簡單,匹配對應(yīng)參數(shù)就好:
window.location. + document.getElementById("searchData").value;
百度:https://m.baidu.com/s?word=
谷歌:https://www.google.com/search?q=
必應(yīng):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=
關(guān)鍵字提示,先通過jsonp請求參數(shù):
var strdomin = document.getElementById("searchData").value; window.status = "請求中"; this.$http.jsonp("http://suggestion.baidu.com/su", { //請求參數(shù) params: { wd: strdomin }, jsonp: 'cb' }).then(function(res){ window.status = "請求結(jié)束"; that.autoDisplay(JSON.parse(res.body).s); },function(){ console.log("error"); });
輸入框中有文字的時候觸發(fā)。
其中JSON.parse用于從一個字符串中解析出json對象。s是suggest words。這里傳到autoDisplay的參數(shù)即關(guān)鍵字提示。
另外將input元素的autocomplete屬性設(shè)置為off可以關(guān)閉自動提示:
<input type="text" name="name" autocomplete="off">
如果所有表單元素都不想使用自動提示功能,只需在表單form上設(shè)置autocomplete=off。
最后將獲取到的關(guān)鍵字提示放到input下面的節(jié)點中即可。
注意:
這里因兼容問題綁定了3個事件,其中l(wèi)istenWords專門針對手機鍵盤的回車鍵和回退鍵:
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(); } } },
如有更好的方式歡迎討論。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
搭建vue3項目以及按需引入element-ui框架組件全過程
element是基于vue.js框架開發(fā)的快速搭建前端的UI框架,下面這篇文章主要給大家介紹了關(guān)于搭建vue3項目以及按需引入element-ui框架組件的相關(guān)資料,文中通過圖文以及代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02vue使用stompjs實現(xiàn)mqtt消息推送通知
這篇文章主要為大家詳細介紹了vue中使用stompjs實現(xiàn)mqtt消息推送通知,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06