预览
预览地址：虾米音乐搜索 主要目的是搜索音乐并获取播放器代码
原理
本段代码主要利用了http://www.xiami.com/app/nineteen/search/key/搜索内容/page/搜索结果页数虾米这个隐藏的API，例如http://www.xiami.com/app/nineteen/search/key/传奇/page/1可以获取到搜索结果总数已经相关歌曲的信息等。
简单的思路是搜索框输入搜索信息点击搜索AJAX载入API搜索结果并返回给页面解析显示，单击一条歌曲时根据搜索结果获得的歌曲ID返回播放器代码。
代码分析
首先是基本的HTML代码
<input type="text" id="text" value="" />
<input type="hidden" id="page" value="1" />
<!--隐藏的input用来存放页面数-->
<button>搜索</button>
<!--#result用来显示歌曲列表 | #navi增加载入更多特效 | #show用来显示播放器代码-->
<div id="list">
<div id="result"></div>
<div id="navi"></div>
</div>
<div id="show"></div>
加载jQuery库文件
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>
添加获取搜索结果的异步事件，增加搜索框回车快捷获取结果效果。第7行用于清除播放器代码显示结果，以防是得到播放器显示结果后重新搜索。第10行用于当搜索结果时不加载载入更多代码。
function search() {
$.ajax({
url: "http://www.xiami.com/app/nineteen/search/key/"+$('#text').val()+"/page/"+$('#page').val(),
type: "get",
dataType: "jsonp",
success: function(data, status) {
$('#show').html('');
$("#list").css('display','block');
if(data.total / 8 != 1) {
$('#navi').html('<center>载入更多</center>');
}
$.each(data.results, function(i,item){
$('<p onclick="show(\''+item.song_id+'\');">'+decodeURIComponent(item.song_name)+' - '+decodeURIComponent(item.artist_name)+'</p>').appendTo('#result');
});
},
error: function() {
alert('failed!');
}
});
}
//当点击搜索按钮时先清除结果显示防止是重新搜索，然后再一步加载搜索结果
$('button').click(function(){
$("#result").html('');
search();
});
//搜索框回车时触发搜索按钮点击事件
$("body").keydown(function() {
if (event.keyCode == "13") {
$('button').click();
}
});
增加点击歌曲名获取歌曲播放器代码事件，先是在页面中显示播放器，再用一个textarea框显示引用代码，并增加了当textarea框获得焦点时自动全选框内代码效果。
function show(id) {
//搜索结束搜索起始页面自动返回到1
$('#page').val('1');
$('#list').css('display', 'none');
var html = '<embed src="http://www.xiami.com/widget/0_'+id+'/singlePlayer.swf" type="application/x-shockwave-flash" width="257" height="33" wmode="transparent"></embed>';
$("#show").html(html);
$("#show").append('<textarea onfocus="this.select();" onmouseover="this.focus()">'+html+'</textarea>');
}
