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

利用百度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);
        }

    }
}())