✔ jquery YouTube Suche

[creativeheadz]

Hey Leute,
ich führe mit folgendem Code eine YouTube Suche durch. Ich bekomme es einfach nicht hin, statt 1 Ergebnis, beispielsweise 5 Suchergebnisse anzeigen zu lassen. Es wird immer nur ein Ergebnis ausgegeben.


Kann mir jemand helfen?

$(document).ready(function()
{

$("#q").keyup(function()
{
var search_input = $(this).val();
var keyword= encodeURIComponent(search_input);
// Youtube API 
var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results=5&v=2&alt=jsonc';

$.ajax({
type: "GET",
url: yt_url,
dataType:"jsonp",
success: function(response){

if(response.data.items){
$.each(response.data.items, function(i,data){
	


var video_id=data.id;
var video_title=data.title;
var final="<div id='title'>"+video_title+"</div>";

$("#suggestions").html(final); // Result

});
}
else
{
$("#suggestions").html("<div id='no'>No Video</div>");
}
}
});
});
});

 

[CPoly]

In deiner each-Schleife überschreibst du jedes mal den Inhalt des Elements "#suggestions". Du musst erst die ganzen strings aneinander hängen und nach der Schleife ins Dokument einfügen.

 

[creativeheadz]

Ohje, jetzt habe ich aber was "gefrickelt". Das Ergebnis ist nicht ganz das was ich will. Nun wird nach jedem keyup immer ein weiteres Ergebnis angehängt. Dabei möchte ich aber immer nur die aktuell 5 passenden Ergebnisse anzeigen.

$(document).ready(function()
{

$("#q").keyup(function()
{
$("#suggestions").slideDown();

var search_input = $(this).val();
var keyword= encodeURIComponent(search_input);
// Youtube API 
var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results=5&v=2&alt=jsonc';

$.ajax({
type: "GET",
url: yt_url,
dataType:"jsonp",
success: function(response){

if(response.data.items){
$.each(response.data.items, function(i,data){

var video_id=data.id;
var video_title=data.title;

var final="<div class=\"q_result_img\"><img src = "+data.thumbnail.sqDefault+"></div><div class=\"q_result_title\">"+video_title+"</div><div class=\"q_result_action\">Abspielen</div>";

$("#suggestions").append(final); 

});
$("#suggestions").html(final); // Result
}
else
{
$("#suggestions").html("<div id='no'>Leider kein Video gefunden :(</div>");
}
}
});
});
});

 

[CPoly]

1. tu das "append" weg
2. deklariere die Variable "final" vor der each-Schleife und initialisiere sie mit dem leeren string
3. in der Schleife weist du "final" nicht einfach das HTML zu, sondern hängst es an ("+=" anstatt "=")

 

[creativeheadz]

Überragend! Vielen Dank es klappt!