页面加载时的 JQuery 搜索答案

【问题标题】：JQuery search on page load页面加载时的 JQuery 搜索
【发布时间】：2016-04-04 17:24:58
【问题描述】：

我正在使用我在下面找到的代码：http://www.rahulsingla.com/blog/2011/08/itunes-performing-itunes-store-search-in-javascript 根据关键字从 Itunes 中提取歌曲，但是我只想在页面加载时提取歌曲而不必使用搜索框，让我们说我的关键字是“搜索关键字”，我想在页面加载或刷新时立即显示歌曲而不使用搜索框，这里是下面的代码：

<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>

【问题讨论】：

标签： javascript jquery api search

【解决方案1】：

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

将此添加到脚本的末尾。它会在 dom 加载后执行搜索。

【讨论】：

不幸的是它没有用，也许我做得不对，例如说关键字是 Drake，我如何获取 Drake 歌曲并在页面加载时查看结果而无需搜索 Drake搜索框
在performSearch函数中更改术语：encodeURIComponent('Drake'),

【解决方案2】：

除了张伦回复：

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

然后像这样更改 preformSearch 函数：

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

【讨论】：

不幸的是它没有用，也许我做得不对，例如说关键字是 Drake，我如何获取 Drake 歌曲并在页面加载时查看结果而无需搜索 Drake搜索框

【解决方案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

【讨论】：