html中搜索框提示语,实现百度搜索框提示语功能

利用百度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 "

" + x + "";

})

this.$listTipsBox.innerHTML = data.join('');

// console.log(data);

}

}

}())