Question

I am using the code below which i found on: http://www.rahulsingla.com/blog/2011/08/itunes-performing-itunes-store-search-in-javascript to pull songs from Itunes based on a keyword, however i only want to pull songs on page-load without having to use the search box, lets say my keyword is "search-keyword", i would like to display songs immidiately on page-load or refresh without using the search box, here is the code below:

<html>
<head>
    <title>iTunes - Music Search in javascript</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

    <style type="text/css">
    .songs-search-result {
        border: 1px solid Gray;
        margin-bottom: 5px;
        padding: 5px;
    }

    .songs-search-result  .label{
        display: inline-block;
        width: 200px;
    }
    </style>

    <script type="text/javascript">
        function urlEncode(obj) {
            var s = '';
            for (var key in obj) {
                s += encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]) + '&';
            }
            if (s.length > 0) {
                s = s.substr(0, s.length - 1);
            }

            return (s);
        }

        function performSearch() {
            var params = {
                term: encodeURIComponent(jQuery('#search-keyword').val()),
                country: 'US',
                media: 'music',
                entity: 'musicTrack',
                //attribute: 'artistTerm,albumTerm,songTerm,musicTrackTerm',
                limit: 20,
                callback: 'handleTunesSearchResults'
            };
            var params = urlEncode(params);

            var url = 'http://ax.itunes.apple.com/WebObjects/MZStoreServices.woa/wa/wsSearch?' + params;
            var html = '<script src="' + url + '"><\/script>';
            jQuery('head').append(html);
        }

        function handleTunesSearchResults(arg) {
            var results = arg.results;
            var html = '';
            for (var i = 0; i < results.length; i++) {
                var item = results[i];
                var obj = {
                    source: 0,
                    track_id: item.trackId,
                    track_name: item.trackCensoredName,
                    track_url: item.trackViewUrl,
                    artist_name: item.artistName,
                    artist_url: item.artistViewUrl,
                    collection_name: item.collectionCensoredName,
                    collection_url: item.collectionViewUrl,
                    genre: item.primaryGenreName
                };
                results[i] = obj;

                html += '<div class="songs-search-result">';

                html += '<span class="label">Track:</span>{0}&nbsp;&nbsp;'.replace("{0}", obj.track_name);
                html += '<a href="{0}" target="_blank">Preview</a>&nbsp;&nbsp;'.replace("{0}", item.previewUrl);
                html += '<a href="{0}" target="_blank">Full Song</a>&nbsp;&nbsp;'.replace("{0}", obj.track_url);
                html += '<span class="label">Track Price:</span>{0} {1}<br />'.replace("{0}", item.trackPrice).replace("{1}", item.currency);
                html += '<span class="label">Artist:</span><a href="{0}" target="_blank">{1}</a><br />'.replace("{0}", obj.artist_url).replace("{1}", obj.artist_name);
                html += '<span class="label">Collection:</span><a href="{0}" target="_blank">{1}</a><br />'.replace("{0}", obj.collection_url).replace("{1}", obj.collection_name);
                html += '<span class="label">Collection Price:</span>{0} {1}<br />'.replace("{0}", item.collectionPrice).replace("{1}", item.currency);
                html += '<span class="label">Primary Genre:</span>{0}<br />'.replace("{0}", obj.genre);

                html += '</div>';
            }
            jQuery('#itunes-results').html(html);
        }       
    </script>
</head>

<body>
    Please enter a search term below (e.g. Michael):<br />
    <input type="text" id="search-keyword" title="Enter Search Keyword" />
    <br />
    <input type="button" value="Perform iTunes Search" onclick="performSearch();" />

    <div id="itunes-results">
    </div>
</body>

Answer 1

$(document).ready(function() {
performSearch();
}

Add this to the end of your script. It'll perform the search when the dom has loaded.

Answer 2

in addition to Lun Zhang reply:

$(document).ready(function() {
    preformSearch("search-keyword");
}

then change the preformSearch function like this:

function performSearch(keyword) { //add keyword parameter
        var params = {
            term: encodeURIComponent(keyword), // use the parameter
            country: 'US',
            media: 'music',
            entity: 'musicTrack',
            //attribute: 'artistTerm,albumTerm,songTerm,musicTrackTerm',
            limit: 20,
            callback: 'handleTunesSearchResults'
        };
        var params = urlEncode(params);

        var url = 'http://ax.itunes.apple.com/WebObjects/MZStoreServices.woa/wa/wsSearch?' + params;
        var html = '<script src="' + url + '"><\/script>';
        jQuery('head').append(html);
    }

Answer 3

<html>
<head>
<title>iTunes - Music Search in javascript</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

<style type="text/css">
.songs-search-result {
    border: 1px solid Gray;
    margin-bottom: 5px;
    padding: 5px;
}

.songs-search-result  .label{
    display: inline-block;
    width: 200px;
}
</style>
</head>
<body>
<div id="itunes-results"></div>
<script>
  function urlEncode(obj) {
            var s = '';
            for (var key in obj) {
                s += encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]) + '&';
            }
            if (s.length > 0) {
                s = s.substr(0, s.length - 1);
            }

            return (s);
        }

        function performSearch(song) {
            var params = {
                term: encodeURIComponent(song),
                country: 'US',
                media: 'music',
                entity: 'musicTrack',
                //attribute: 'artistTerm,albumTerm,songTerm,musicTrackTerm',
                limit: 20,
                callback: 'handleTunesSearchResults'
            };
            var params = urlEncode(params);

            var url = 'http://ax.itunes.apple.com/WebObjects/MZStoreServices.woa/wa/wsSearch?' + params;
          var script = document.createElement("script");
          script.src=url;
            jQuery('head').append(script);
        }

        function handleTunesSearchResults(arg) {
            var results = arg.results;
            var html = '';
            for (var i = 0; i < results.length; i++) {
                var item = results[i];
                var obj = {
                    source: 0,
                    track_id: item.trackId,
                    track_name: item.trackCensoredName,
                    track_url: item.trackViewUrl,
                    artist_name: item.artistName,
                    artist_url: item.artistViewUrl,
                    collection_name: item.collectionCensoredName,
                    collection_url: item.collectionViewUrl,
                    genre: item.primaryGenreName
                };
                results[i] = obj;

                html += '<div class="songs-search-result">';

                html += '<span class="label">Track:</span>{0}&nbsp;&nbsp;'.replace("{0}", obj.track_name);
                html += '<a href="{0}" target="_blank">Preview</a>&nbsp;&nbsp;'.replace("{0}", item.previewUrl);
                html += '<a href="{0}" target="_blank">Full Song</a>&nbsp;&nbsp;'.replace("{0}", obj.track_url);
                html += '<span class="label">Track Price:</span>{0} {1}<br />'.replace("{0}", item.trackPrice).replace("{1}", item.currency);
                html += '<span class="label">Artist:</span><a href="{0}" target="_blank">{1}</a><br />'.replace("{0}", obj.artist_url).replace("{1}", obj.artist_name);
                html += '<span class="label">Collection:</span><a href="{0}" target="_blank">{1}</a><br />'.replace("{0}", obj.collection_url).replace("{1}", obj.collection_name);
                html += '<span class="label">Collection Price:</span>{0} {1}<br />'.replace("{0}", item.collectionPrice).replace("{1}", item.currency);
                html += '<span class="label">Primary Genre:</span>{0}<br />'.replace("{0}", obj.genre);

                html += '</div>';
            }
            jQuery('#itunes-results').html(html);
        }
$(function(){
  var songToLoad = 'Drake';
  performSearch(songToLoad);
});
</script>
</body>
</html>

老实说，这不是一个好用的代码，它表明无论谁编写它，都不了解jQuery，无论如何，我修改了一些代码，看看并看到差异如果您想了解更多解释，请告诉我。

还有一件事，如果您想更改歌曲，请从此处更改

var songToLoad = 'Drake';

Codepin

JQuery search on page load

3 个答案: