<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Melon 검색</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <form id="melon-query-form" class="input-group" style="margin: 20px 0;">
                    <input type="text" name="q" class="form-control" autocomplete="off" />
                    <span class="input-group-btn">
                        <input type="submit" class="btn btn-default" />
                    </span>
                </form>

                <ul id="media-list">
                </ul>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script id="song-template" type="text/x-template">
        <div class="media">
        <div class="media-left">
            <a href="http://www.melon.com/song/detail.htm?songId=<%= SONGID %>" target="_blank">
                <img src="<%= ALBUMIMG %>" class="media-object" style="widwth: 64px; height: 64px;" />
            </a>
        </div>
        <div class="media-body">
            <h4>
                <a href="http://www.melon.com/song/detail.htm?songId=<%= SONGID %>" target="_blank">
                    <%= SONGNAME %>
                </a>
            </h4>
            <%= ALBUMNAME %> by
            <%= ARTISTNAME %>
        </div>
    </div>
</script>

    <script>
        function melon_search(query) {
            var params = {
                'query': query,
            };

            $.getJSON('http://www.melon.com/search/keyword/index.json?jscallback=?', params)
                .done(function (resp) {
                    console.log(resp);

                    $('#media-list').html('');

                    var tpl = _.template($('#song-template').html());

                    $(resp.SONGCONTENTS).each(function () {
                        console.log(this);

                        // var html = tpl(this);
                        // $(html).appendTo('#media-list');

                        $('<div class="media">' +
                            '<div class="media-left">' +
                            '<a href="http://www.melon.com/song/detail.htm?songId=' + this.SONGID +
                            '" target="_blank">' +
                            '<img src="' + this.ALBUMIMG +
                            '" class="media-object" style="widwth: 64px; height: 64px;" />' +
                            '</a>' +
                            '</div>' +
                            '<div class="media-body">' +
                            '<h4>' +
                            '<a href="http://www.melon.com/song/detail.htm?songId=' + this.SONGID +
                            '" target="_blank">' +
                            this.SONGNAME +
                            '</a>' +
                            '</h4>' +
                            this.ALBUMNAME + ' by ' + this.ARTISTNAME +
                            '</div>' +
                            '</div>').appendTo('#media-list');
                    });
                });
        };

        $(function () {
            $('#melon-query-form').submit(function (e) {
                e.preventDefault()

                var q = $(this).find('input[name=q]').val();
                melon_search(q);
            });
        });
    </script>

</body>

</html>