JQuery: Keypress voegt gegevens toe aan youtube-resultaten, hoe kan het resultaat worden ververst met nieuwe gegevens?

Ik heb hier een jsfiddle: http://jsfiddle.net/hhimanshu/eLhLS/1/

Current:

On keypress, it keeps on appending results from youtube  

Vereist:

On keypress, update the results, with new data instead of appending it  

Hoe los ik dit probleem op?

0

2 antwoord

This should work:http://jsfiddle.net/epinapala/eLhLS/38/

     $(function(){
    $('#search-input').live('keyup',function() {
       //alert('hi');
        var clone = $('#result').find('.item').clone();

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

        $.ajax({
          url: yt_url,
          type: 'GET',
          dataType: 'jsonp',
          complete: function(xhr, textStatus) {
            //called when complete
          },
          success: function(response, textStatus, xhr) {
            if(response.data.items) {
                $.each(response.data.items, function(i, data) {
                    console.log(data)
                    search_data = {
                        'id': data.id,
                        'title': data.title,
                        'views': data.viewCount,
                        'thumbnail': data.thumbnail['sqDefault'],
                    }
                    var item = $('#result .item').clone().removeClass('item');
                    video_result_template(item, search_data).appendTo('#result').fadeIn();//slow/fast?
                });
            } else {

            }
          },
          error: function(xhr, textStatus, errorThrown) {
            //called when there is an error
          }
        });

    });
});

function video_result_template(item, data) {
    item.find('.thumbnail').text(data.thumbnail);
    item.find('.title').text(data.title);
    item.find('.views').text(data.views);
    return item;
}
​

1
toegevoegd
OK, ik wacht
toegevoegd de auteur daydreamer, de bron
sorry, nog steeds hetzelfde
toegevoegd de auteur daydreamer, de bron
Dat werkt goed, maar is dit de beste manier om dit te doen? Ik bedoel, ik moet HTML op twee plaatsen bewaren? in een bestand en in de syntaxis van jQuery?
toegevoegd de auteur daydreamer, de bron
bekijk ook @ slash197 fiddle
toegevoegd de auteur daydreamer, de bron
en een voorbeeld van hoe kan ik dat doen? Ik ben erg nieuw voor jQuery
toegevoegd de auteur daydreamer, de bron
Dit voegt nog steeds het resultaat plus toe, ik moet op "Enter" drukken om het resultaat te krijgen dat niet wenselijk is
toegevoegd de auteur daydreamer, de bron
zeker, bedankt !!!
toegevoegd de auteur daydreamer, de bron
geweldig, dit is prefect en gemakkelijk te begrijpen, bedankt veel Eswar :)
toegevoegd de auteur daydreamer, de bron
ok wacht, laten we opruimen ...
toegevoegd de auteur Eswar Rajesh Pinapala, de bron
Het antwoord van nevermind @ slash197 is nog beter! :)
toegevoegd de auteur Eswar Rajesh Pinapala, de bron
ok bewerkt. Ik denk dat ik meer kan refacteren, maar ik laat het voor je achter. Je zou nu waarschijnlijk een idee moeten krijgen. Is dit ook de beste manier om te doen? Nee, er kunnen meerdere manieren zijn. Je kunt dit ook doen zonder een extra functie te gebruiken - video_result_template. Maar je moet meer tijd doorbrengen!
toegevoegd de auteur Eswar Rajesh Pinapala, de bron
eigenlijk kun je het op een schonere manier doen. U hoeft uw 'item's niet te verwijderen, in plaats daarvan moet u de resultaten instellen met .text() en vervolgens bij een nieuwe load de resultaten leegmaken met .text (' ')
toegevoegd de auteur Eswar Rajesh Pinapala, de bron
hahah .. sorry, ik bleef maar vergeten om alle delen van het antwoord in één keer te veranderen. Ik gaf de verkeerde jsfiddle-link, Nu is de fiddle-link bijgewerkt
toegevoegd de auteur Eswar Rajesh Pinapala, de bron
pls nu kijken .. :)
toegevoegd de auteur Eswar Rajesh Pinapala, de bron
ah sorry verkeerde link ... 1 min .. ik verstuur de wijzigingen
toegevoegd de auteur Eswar Rajesh Pinapala, de bron

Wil je zoiets als dit http://jsfiddle.net/eLhLS/37/ ?

1
toegevoegd
Dit is geweldig, bedankt voor het prachtige antwoord, nu begrijp ik waarom jQuery geweldig is!
toegevoegd de auteur daydreamer, de bron
Ja, maar mijn voorkeur gaat uit naar het bewaren van html in HTML-bestand in plaats van in het js-bestand, om het eenvoudiger en overzichtelijker te maken
toegevoegd de auteur daydreamer, de bron
@daydreamer Ik heb de viool bewerkt en de link in mijn antwoord bijgewerkt
toegevoegd de auteur slash197, de bron