jQuery实现搜索框插件+豆瓣音乐接口实现豆瓣搜索框

• jQuery实现搜索框插件
• 豆瓣音乐接口实现豆瓣搜索框

豆瓣接口有时不稳定，网络请求会报400，不要惊慌。我主要是练习一下jQuery的JSONP和封装插件。

<div class="searchWrapper">
    
</div>
<script src="../js/searchBox.js"></script>
<script>
    $(".searchWrapper").search({
        placeholder:'唱片名、表演者、条码、ISRC',
        url:'https://api.douban.com/v2/music/search',
        type:'GET',
        dataType:'jsonp',
        sucFn:callbackObj.doubanCa,
        // data:'tag=',
        data:'q=',
        count:'&count=7',
        errFn:function(){
            console.log('error');
        }
    });
    //如果鼠标点击了除搜索框以外的地方，就隐藏下拉列表
    $(document).on("mousedown",function(e){
        var event = e || window.event;
        var target = event.target;
        if(target != $('.searchText')[0] && $(target).parents(".searchList")){
            $('.searchList').hide();
        }
    });
    formObj.doubanForm();
</script>

css代码参考就好：

/* 
 * 样式没有做分类处理采用注释提示
 * 建议不修改项：表示保留插件样式风格
 * 建议保留项：表示会影响插件样式结构，不能随意修改
 */
*{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
.searchBox{
    border: none;/*建议不修改项*/
    width: 460px;
    height: 30px;
    margin-top: 15px;
    border-top-left-radius: 5px;/*建议不修改项*/
    border-bottom-left-radius: 5px;/*建议不修改项*/
    border-top-right-radius: 5px;/*建议不修改项*/
    border-bottom-right-radius: 5px;/*建议不修改项*/
    border-bottom: 1px solid #bbb;/*建议不修改项*/
     overflow: hidden;/*建议不修改项
}
.searchBox::after{/*建议保留项*/
    content: "";
    clear: both;
    display: block;
}
.searchBox .searchText{
    float: left;/*建议保留项*/
    padding-left: 5px;
    width: 415px;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    outline: none;/*建议不修改项*/
    border-style: none;/*建议不修改项*/

}
.searchBox .searchButton{
    display: block;
    width: 40px;
    height: 30px;
    outline: none;
    border-style: none;/*建议不修改项*/
    position: relative;
    z-index: 1000;
    opacity: 0;
}
.searchList{
    position: absolute;/*建议保留项*/
    /* display: none; */
    width: 425px;
    border-left: 1px solid #87CEEB;
    border-right: 1px solid #87CEEB;
}
.searchList li{
    width: 420px;
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #87CEEB;
    background-color: #fff;
}
.searchList li:hover{
    background-color:  #f0f3ef;
}
.searchList li a{
    display: block;
    width: 100%;
    height: 100%;
}
.searchList li a::after{
    content: "";
    clear: both;
    display: block;
}
.searchList li::after{
    content: "";
    clear: both;
    display: block;
}
.searchList img,div{
    float: left;
    width: 48px;
}
.searchList img{
    float: left;
    width: 48px;
}
.searchList div{
    float: left;
    width: 372px;
}
.searchList em{
    padding-left: 5px;
    font-size: 14px;
    font-style: normal;
    color: #ff00ff;
}
.searchList span{
    font-size: 12px;
    color: #888;
}

/* 搜索按钮图标 */
.searchBuDivf{
    position: relative;
    width: 40px;
    height: 30px;
    background-color:#bbb;/*建议不修改项*/
}
.searchBuDivf::after{
    content: "";
    clear: both;
    display: block;
}
.searchBuDiv{
    float: left;
    width: 12px;
    height: 12px;
    position: relative;
    border-radius: 100%;
    border:2px solid #fff;
    position: relative;
    margin-top: -25px;
    margin-left: 9px;  
}
.searchBuDiv::after{
    content: "";
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);        
    transform: rotate(45deg);
    width:8px;
    height: 2px;
    position: absolute;
    top:13px;
    left:11px;
    background-color: #fff;
}

js代码：

(function($){
    //搜索框插件对象
    var searchBoxObj = {
        init:function(options){
            this.opt = options || {};//将必要的参数缓存到插件对象上，并且使用空对象避免无参数时报错
            this.creatDom();//生成DOM结构
            this.bindEvent();//给输入框绑定input事件
        },
        creatDom:function(){//生成DOM结构的方法
            var htmlStr = '<form class="searchForm" action="" target="_blank" autocomplete="off">\
                                <fieldset class="searchBox">\
                                    <legend></legend>\
                                    <input type="text" name="" class="searchText">\
                                    <div class="searchBuDivf">\
                                        <input type="submit" name="" class="searchButton" value="" />\
                                        <div class="searchBuDiv"></div>\
                                    </div>\
                                </fieldset>\
                                <ul class="searchList"></ul>\
                           </form>';
            this.opt.father.html(htmlStr);//将插件结构插入到插件容器
            $('.searchText').attr("placeholder",this.opt.placeholder);

        },
        bindEvent:function(){//实现输入框input事件绑定
            var self = this;
            $('.searchText').on('input',function(e){
                e.preventDefault();//阻止默认事件
                var value = $(this).val();
                self.getData(value);//发送请求，获取数据
            });
        },
        getData:function(val){
        //根据构建数据构建ajax数据请求方法
            var self = this;
            var opt = self.opt;
            $.ajax({
                type:opt.type,
                url:opt.url,
                dataType:opt.dataType,
                jsonp:opt.jsonp,
                data:opt.data + val + opt.count,
                success:function(data){
                    opt.sucFn(data);
                },
                error:function(){
                    opt.errFn();
                }
            })
        }
    }
    //在jQuery上扩展插件方法
    $.fn.extend({
        //options为定义插件的一些数据
        search:function(options){
            options.father = this || $('body');//将插件容器缓存在options上
            searchBoxObj.init(options);//调用插件生成器
        }
    });
})(jQuery);
//
var callbackObj = {
    //豆瓣音乐接口跨域请求成功的回调函数
    doubanCa:function(data){
        var list = data.musics;
        console.log(list);
        var $searchList = $('.searchList');
        var str = '';
        for(var i = 0; i < list.length; i++){
            str += '<li>\
                    <a href="' + list[i].alt +'" onclick="">\
                        <img src="' + list[i].image + '">\
                        <div>\
                            <em>' + list[i].title + '</em>\
                            <span>(' + list[i].author[0].name + ')</span>\
                        </div>\
                    </a>\
                </li>';
        }
        $searchList.html($(str));
        $searchList.show();
    }
}
var formObj = {
    doubanForm:function(){
        $('.searchForm').attr('action','https://music.douban.com/subject_search');
        $('.searchText').attr('name','search_text');
    }
}

// <li>
//     <a href="https://site.douban.com/adele/" onclick="">
//         <img src="https://img3.doubanio.com/view/site/small/public/71c3285636cc0af.jpg" alt="">
//         <div>
//             <em>adele</em>
//             <span>(音乐人)</span>
//         </div>
//     </a>
// </li>
// 豆瓣API 开发平台：
// https://developers.douban.com/wiki/?title=guide
// 豆瓣API V2 (测试版)：
// https://developers.douban.com/wiki/?title=api_v2
// {
//     placeholder:'唱片名、表演者、条码、ISRC',
//     url:'https://api.douban.com/v2/music/search',
//     type:'GET',
//     dataType:'jsonp',
//     sucFn:function(data){
//         console.log(data);
//     },
//     data:'q=',//搜索的关键字
//     count:'&count=7',//搜索数据的条数
//     errFn:function(){
//         console.log('error');
//     }
// }



//百度search(options)中的options参数
// {
//     placeholder:'请输入关键字',
//     url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
//     type:'GET',
//     dataType:'jsonp',
//     sucFn:function(data){
//         console.log(data);
//     },
//     data:'wd=',
//     jsonp:'cb',
//     count:'',
//     errFn:function(){
//         console.log('error');
//     }
// }