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:;
     opacity:;
 }
 .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');
 //     }
 // }