jquery - Jquery：Keypress 将数据附加到 youtube 结果中，如何用新数据刷新结果？

Question

我在这里有一个 jsfiddle：http: //jsfiddle.net/hhimanshu/eLhLS/1/

当前的：

On keypress, it keeps on appending results from youtube  

必需的：

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

我该如何解决这个问题？

Answer 1

你想要这样的http://jsfiddle.net/eLhLS/37/吗？

Answer 2

这应该工作：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;
}
​

​</p>