實現百度搜索框提示語功能
阿新 • • 發佈:2018-11-10
利用百度jsonp介面實現搜尋提示語.
jsonp.js封裝
function jsonp(url, options) { // 建立script標籤 var $script = document.createElement('script'); // 解決快取問題 var f = url.indexOf('?') > - 1 ? '&' : '?'; url += f + '_=' + Date.now(); // 把引數拼接到url上面 for(var i in options) { url += '&' + i + '=' + options[i]; } $script.src = url; document.body.appendChild($script); }
baidu.js:實現具體功能函式
var baiduInput = (function(){ var timer = null; return { init: function(ele) { this.$ele = document.querySelector(ele); this.$inputSearch = this.$ele.querySelector('input'); this.$listTipsBox = this.$ele.querySelector('.search-list'); this.event(); }, event:function(){ var _this = this; this.$inputSearch.onfocus = function() { // 判斷文字內是否有文字,如果有就顯示下拉框 _this.checkInput(); _this.getData(); } this.$inputSearch.oninput = function() { //判斷文字內容為空, 隱藏下拉框,如果有文字顯示下拉框 _this.checkInput(); clearInterval(timer); // 目的: 減少http請求, 降低對伺服器的壓力 timer = setTimeout(function() { _this.getData(); }, 500) // 根據輸入的內容,獲取下拉框資料, 並渲染到下拉框中 }, document.onclick = function(e) { if(e.target !== _this.$inputSearch) { // 如果點選的不是搜尋框, 讓搜尋框中的下拉框隱藏 _this.listShow(); } } // this.$inputSearch.onblur = function() { // } // 利用事件委託給每一個li新增點選事件 this.$listTipsBox.onclick = function(e) { e = e || window.event; var target = e.target || e.srcElement; if(target.nodeName === 'LI') { // 把li上面的文字賦值給文字框 _this.$inputSearch.value = target.innerHTML; _this.listShow(); // 隱藏下拉框 } } }, listShow: function(val) { val = val || 'none'; this.$listTipsBox.style.display = val; }, checkInput: function(val) { // 獲取文字框的值 val = val || this.$inputSearch.value; if(val === '') { this.listShow(); } else { this.listShow('block'); } }, getData: function(val) { if (val === '') return; val = val || this.$inputSearch.value; var params = { wd: val, cb: "baiduInput.insertData" } jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', params); }, insertData: function(data) { data = data.s; data = data.map(function(x) { return "<li>" + x + "</li>"; }) this.$listTipsBox.innerHTML = data.join(''); // console.log(data); } } }())