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