api 已失效

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="referrer" content="no-referrer" />
    6.     <title>豆瓣音乐搜索</title>
    7.     <link rel="stylesheet" href="css/music.css" />
    8. </head>
    9. <body>
    10.     <div class="search-wrap">
    11.         <input type="text" id="J_searchInput" class="search-input" placeholder="唱片名、表演者、条码、ISRC" />
    12.         <ul class="search-list J_list"></ul>
    13.     </div>
    15.   <script type="text/html" id="J_searchItemTpl">
    16.       <li class="list-item">
    17.             <a href="{{url}}" target="_blank" class="item-lk">
    18.                 <div class="item-img">
    19.                     <img src="{{image}}" alt="{{title}}" />
    20.                 </div>
    21.                 <div class="intro">
    22.                     <h1 class="title">{{title}}</h1>
    23.                     <p class="author">表演者：<span>{{singer}}</span></p>
    24.                 </div>
    25.             </a>
    26.         </li>
    27.   </script>
    28.     <script src="js/utils.js"></script>
    29.     <script src="js/music.js"></script>
    30. </body>
    31. </html>
    html{
    background-color: #f0f3ef;
}

body{
    margin: 0;
}

input{
    outline: none;
    border: none;

}

ul{
    padding: 0;
    margin: 0;
    list-style: none;
}

a{
    text-decoration: none;
    color: #333;
}

li,div{
    box-sizing: border-box;
}

img{
    width: 100%;
}

h1,p{
    margin: 0;
    font-weight: normal;
}

.search-wrap{
    position: relative;
    width: 470px;
    height: 34px;
    margin: 50px auto;
}

.search-wrap .search-input{
    width: 470px;
    height: 34px;
    background-color: #fff;
    text-indent: 10px;
    font-size: 13px;
    border-radius: 3px;
    box-shadow: 0px 2px 1px #ccc;
}

.search-wrap .search-list{
    display: none;
    position: absolute;
    top: 37px;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.search-wrap .list-item{
    height: 55px;
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

.search-wrap .list-item .item-lk{
    display: block;
    position: relative;
    height: 100%;
}

.search-wrap .list-item .item-img{
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
}

.search-wrap .list-item .intro{
    margin-left: 48px;
}

.search-wrap .list-item .intro .title{
    color: #416691;
    font-size: 14px;
}

.search-wrap .list-item .intro .author{
    color: #999;
    font-size: 14px;
}

    ;
(function (doc) {
    var oInput = doc.getElementById('J_searchInput'),
        searchItemTpl = doc.getElementById('J_searchItem').innerHTML,
        oList = doc.getElementsByClassName('J_list')[0],
        musicCount = 7;
    var init = function () {
        bindEvent();
    }

    function bindEvent() {
        oInput.addEventListener('input', debounce(musicSearch, 500, false), false);
    }

    function showList(show) {
        if (show) {
            oList.style.display = 'block';
        } else {
            oList.innerHTML = '';
            oList.style.display = '';
        }
    }

    function renderList(data) {
        var list = '';
        data.forEach(function (elem) {
            list += searchItemTpl.replace(/{{(.*?)}}/g, function (node, key) {
                return {
                    url: elem.alt,
                    image: elem.image,
                    title: elem.alt_title || elem.attrs.title[0],
                    singer: elem.attrs.singer ? elem.attrs.singer[0] : ''
                } [key];
            });
        });

        oList.innerHTML = list;
        showList(true);
    }

    function musicSearch() {
        var kw = trimSpace(this.value),
            len = kw.length;
        if (len > 0) {
            dataRequest(kw, musicCount);
        } else {
            showList(false);
        }
    }

    function dataRequest(keyword, musicCount) {
        xhr.ajax({
            url: 'https://api.douban.com/v2/music/search?q=' + keyword + '&count=' + musicCount,
            type: 'GET',
            dataType: 'JSONP',
            jsonp: 'callback',
            success: function (data) {
                if (data && data.musics.length > 0) {
                    renderList(data.musics);
                }
            }
        })
    }

    init();
})(document);