- 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代码参考就好：
1 /* 2 * 样式没有做分类处理采用注释提示 3 * 建议不修改项：表示保留插件样式风格 4 * 建议保留项：表示会影响插件样式结构，不能随意修改 5 */ 6 *{ 7 padding: 0px; 8 margin: 0px; 9 list-style: none; 10 } 11 .searchBox{ 12 border: none;/*建议不修改项*/ 13 width: 460px; 14 height: 30px; 15 margin-top: 15px; 16 border-top-left-radius: 5px;/*建议不修改项*/ 17 border-bottom-left-radius: 5px;/*建议不修改项*/ 18 border-top-right-radius: 5px;/*建议不修改项*/ 19 border-bottom-right-radius: 5px;/*建议不修改项*/ 20 border-bottom: 1px solid #bbb;/*建议不修改项*/ 21 overflow: hidden;/*建议不修改项 22 } 23 .searchBox::after{/*建议保留项*/ 24 content: ""; 25 clear: both; 26 display: block; 27 } 28 .searchBox .searchText{ 29 float: left;/*建议保留项*/ 30 padding-left: 5px; 31 width: 415px; 32 height: 30px; 33 line-height: 30px; 34 font-size: 13px; 35 outline: none;/*建议不修改项*/ 36 border-style: none;/*建议不修改项*/ 37 38 } 39 .searchBox .searchButton{ 40 display: block; 41 width: 40px; 42 height: 30px; 43 outline: none; 44 border-style: none;/*建议不修改项*/ 45 position: relative; 46 z-index: 1000; 47 opacity: 0; 48 } 49 .searchList{ 50 position: absolute;/*建议保留项*/ 51 /* display: none; */ 52 width: 425px; 53 border-left: 1px solid #87CEEB; 54 border-right: 1px solid #87CEEB; 55 } 56 .searchList li{ 57 width: 420px; 58 padding-left: 5px; 59 padding-top: 5px; 60 padding-bottom: 5px; 61 border-bottom: 1px solid #87CEEB; 62 background-color: #fff; 63 } 64 .searchList li:hover{ 65 background-color: #f0f3ef; 66 } 67 .searchList li a{ 68 display: block; 69 width: 100%; 70 height: 100%; 71 } 72 .searchList li a::after{ 73 content: ""; 74 clear: both; 75 display: block; 76 } 77 .searchList li::after{ 78 content: ""; 79 clear: both; 80 display: block; 81 } 82 .searchList img,div{ 83 float: left; 84 width: 48px; 85 } 86 .searchList img{ 87 float: left; 88 width: 48px; 89 } 90 .searchList div{ 91 float: left; 92 width: 372px; 93 } 94 .searchList em{ 95 padding-left: 5px; 96 font-size: 14px; 97 font-style: normal; 98 color: #ff00ff; 99 } 100 .searchList span{ 101 font-size: 12px; 102 color: #888; 103 } 104 105 /* 搜索按钮图标 */ 106 .searchBuDivf{ 107 position: relative; 108 width: 40px; 109 height: 30px; 110 background-color:#bbb;/*建议不修改项*/ 111 } 112 .searchBuDivf::after{ 113 content: ""; 114 clear: both; 115 display: block; 116 } 117 .searchBuDiv{ 118 float: left; 119 width: 12px; 120 height: 12px; 121 position: relative; 122 border-radius: 100%; 123 border:2px solid #fff; 124 position: relative; 125 margin-top: -25px; 126 margin-left: 9px; 127 } 128 .searchBuDiv::after{ 129 content: ""; 130 -webkit-transform: rotate(45deg); 131 -moz-transform: rotate(45deg); 132 transform: rotate(45deg); 133 width:8px; 134 height: 2px; 135 position: absolute; 136 top:13px; 137 left:11px; 138 background-color: #fff; 139 }
js代码：
1 (function($){ 2 //搜索框插件对象 3 var searchBoxObj = { 4 init:function(options){ 5 this.opt = options || {};//将必要的参数缓存到插件对象上，并且使用空对象避免无参数时报错 6 this.creatDom();//生成DOM结构 7 this.bindEvent();//给输入框绑定input事件 8 }, 9 creatDom:function(){//生成DOM结构的方法 10 var htmlStr = '<form class="searchForm" action="" target="_blank" autocomplete="off">\ 11 <fieldset class="searchBox">\ 12 <legend></legend>\ 13 <input type="text" name="" class="searchText">\ 14 <div class="searchBuDivf">\ 15 <input type="submit" name="" class="searchButton" value="" />\ 16 <div class="searchBuDiv"></div>\ 17 </div>\ 18 </fieldset>\ 19 <ul class="searchList"></ul>\ 20 </form>'; 21 this.opt.father.html(htmlStr);//将插件结构插入到插件容器 22 $('.searchText').attr("placeholder",this.opt.placeholder); 23 24 }, 25 bindEvent:function(){//实现输入框input事件绑定 26 var self = this; 27 $('.searchText').on('input',function(e){ 28 e.preventDefault();//阻止默认事件 29 var value = $(this).val(); 30 self.getData(value);//发送请求，获取数据 31 }); 32 }, 33 getData:function(val){ 34 //根据构建数据构建ajax数据请求方法 35 var self = this; 36 var opt = self.opt; 37 $.ajax({ 38 type:opt.type, 39 url:opt.url, 40 dataType:opt.dataType, 41 jsonp:opt.jsonp, 42 data:opt.data + val + opt.count, 43 success:function(data){ 44 opt.sucFn(data); 45 }, 46 error:function(){ 47 opt.errFn(); 48 } 49 }) 50 } 51 } 52 //在jQuery上扩展插件方法 53 $.fn.extend({ 54 //options为定义插件的一些数据 55 search:function(options){ 56 options.father = this || $('body');//将插件容器缓存在options上 57 searchBoxObj.init(options);//调用插件生成器 58 } 59 }); 60 })(jQuery); 61 // 62 var callbackObj = { 63 //豆瓣音乐接口跨域请求成功的回调函数 64 doubanCa:function(data){ 65 var list = data.musics; 66 console.log(list); 67 var $searchList = $('.searchList'); 68 var str = ''; 69 for(var i = 0; i < list.length; i++){ 70 str += '<li>\ 71 <a href="' + list[i].alt +'" onclick="">\ 72 <img src="' + list[i].image + '">\ 73 <div>\ 74 <em>' + list[i].title + '</em>\ 75 <span>(' + list[i].author[0].name + ')</span>\ 76 </div>\ 77 </a>\ 78 </li>'; 79 } 80 $searchList.html($(str)); 81 $searchList.show(); 82 } 83 } 84 var formObj = { 85 doubanForm:function(){ 86 $('.searchForm').attr('action','https://music.douban.com/subject_search'); 87 $('.searchText').attr('name','search_text'); 88 } 89 } 90 91 // <li> 92 // <a href="https://site.douban.com/adele/" onclick=""> 93 // <img src="https://img3.doubanio.com/view/site/small/public/71c3285636cc0af.jpg" alt=""> 94 // <div> 95 // <em>adele</em> 96 // <span>(音乐人)</span> 97 // </div> 98 // </a> 99 // </li> 100 // 豆瓣API 开发平台： 101 // https://developers.douban.com/wiki/?title=guide 102 // 豆瓣API V2 (测试版)： 103 // https://developers.douban.com/wiki/?title=api_v2 104 // { 105 // placeholder:'唱片名、表演者、条码、ISRC', 106 // url:'https://api.douban.com/v2/music/search', 107 // type:'GET', 108 // dataType:'jsonp', 109 // sucFn:function(data){ 110 // console.log(data); 111 // }, 112 // data:'q=',//搜索的关键字 113 // count:'&count=7',//搜索数据的条数 114 // errFn:function(){ 115 // console.log('error'); 116 // } 117 // } 118 119 120 121 //百度search(options)中的options参数 122 // { 123 // placeholder:'请输入关键字', 124 // url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', 125 // type:'GET', 126 // dataType:'jsonp', 127 // sucFn:function(data){ 128 // console.log(data); 129 // }, 130 // data:'wd=', 131 // jsonp:'cb', 132 // count:'', 133 // errFn:function(){ 134 // console.log('error'); 135 // } 136 // }