2016-04-04 32 views
0

Ich benutze den Code unter dem ich fand auf: http://www.rahulsingla.com/blog/2011/08/itunes-performing-itunes-store-search-in-javascript, um Songs von Itunes basierend auf einem Schlüsselwort zu ziehen, aber ich möchte nur Songs auf Seite laden, ohne das Suchfeld verwenden zu müssen sagen, mein Stichwort „search-Stichwort“ ist, würde ich Songs wie immidiately, hier ohne mit der Suchfunktion auf Seite Last oder aktualisieren, um anzuzeigen ist der folgende Code:JQuery Suche auf Seite laden

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

Antwort

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

hinzufügen Dies bis zum Ende Ihres Skripts. Es wird die Suche durchführen, wenn das Dom geladen wurde.

+0

Leider hat es nicht funktioniert, vielleicht bin ich einfach nicht richtig machen, können zum Beispiel sagen, das Schlüsselwort ist Drake, wie kann ich Drake Lieder holen und Ergebnis auf Seite laden, ohne Drake im Suchfeld – user3476168

+1

in der performSearch-Funktion ändern Begriff ändern: encodeURIComponent ('Drake'), –

0

zusätzlich zu Lun Zhang antworten:

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

dann die Funktion wie folgt preformSearch ändern:

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

Leider hat es nicht funktioniert, vielleicht ich Ich mache es einfach nicht richtig, sagen wir zum Beispiel, das Schlüsselwort ist Drake, wie kann ich Drak holen? Die Lieder und das Suchergebnis werden beim Laden der Seite angezeigt, ohne dass Drake im Suchfeld gesucht werden muss – user3476168

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

um ehrlich zu sein mit Ihnen, dann ist dies kein guter Code verwendet werden, es zeigt an, dass, wer auch immer es geschrieben hat, jQuery nicht gut kennt, sowieso, ich habe etwas Code geändert, schaue es mir an und sehe die Unterschiede, wenn du mehr Erklärung möchtest, lass es mich wissen.

eine weitere Sache, wenn Sie den Song ändern möchten, hier wechseln von

var songToLoad = 'Drake'; 

Codepin