當查詢重新運行時，搜索結果會附加並且不會更新

Question

我有以下代碼，它使用API​​來搜索影片。當我第一次搜索電影時，會顯示結果，但對於我的第二個查詢，結果會附加到之前的結果列表，但它們應該更新而不是附加。請讓我知道解決方案。

$(document).ready(function(){ 

    $('#results-list').on('click', 'li', function(){ 

    var imdbID = $(this).attr('data-id'); 

    $.ajax({ 
     url: 'http://www.omdbapi.com/?i=' + imdbID, 
     method: 'get', 
     dataType: 'json', 
     success: function(movie){ 
     var movieTitle = movie['Title']; 
     var movieYear = movie['Year']; 
     var movieRuntime = movie['Runtime']; 
     var movieGenre = movie['Genre']; 
     var movieDirector = movie['Director']; 
     var moviePlot = movie['Plot']; 
     var moviePoster = movie['Poster']; 
     var selectionBox = $('#selected'); 
     var selectionBody = $('#selected-result'); 
     var listElements = $('<li><h3></h3></li>'); 

     //listElements.append(movieTitle); 

     selectionBody.append('<span><h2>' + movieTitle + ' :: ' + movieYear + '</h2></span>'); 

     selectionBox.append('<span><h5>Runtime: ' + movieRuntime + '</h5></span>'); 

     selectionBox.append('<span><h5>Director: ' + movieDirector + '</h5></span>'); 

     selectionBox.append('<span><h5>Plot: ' + moviePlot + '</h5></span>'); 

     selectionBox.append('<span><img src="' + moviePoster + '""></span>'); 

     } 

    }); 

    }); 


    $('form').bind('keyup submit', function(event){ 

    event.preventDefault(); 

    var form = $(this); 

    var searchQuery = $('#input-box').val(); 

    //var resultsBox = $('#search-results'); 
    var resultsList = $('#results-list'); 
    //var selectionBox = $('#selected-result'); 
    var searchResults; 
    //var selectedResult; 
    var imdb; 
    $.ajax({ 
     url: 'http://www.omdbapi.com/?s=' + searchQuery, 
     method: 'get', 
     dataType: 'jsonp', 
     success: function(omdb){ 
     $('#input-box').html(' '); 
     searchResults = omdb.Search; 
     for(i=0; i<searchResults.length; i+=1){ 
      var listLink = $("<a href='#'></a>"); 
      var title = searchResults[i]['Title']; 
      var year = searchResults[i]['Year']; 
      imdb = searchResults[i]['imdbID']; 
      var listItem = $('<li data-id="' + imdb + '"></li>'); 

      listLink.append(year, " : ", title); 
      listItem.append(listLink); 
      resultsList.append(listItem); 
      //http://www.omdbapi.com/?i=" + imdbID + "'></a> 
     } 
     }, 
     error: function(){ 
     $('.error').slideDown(); 
     setTimeout(function(){$('.error').slideUp();}, 3000); 
     } 
    }); 
    }); 
}); 

Answer 1

正如@Barmar和@Zhilhao指出的那兩個人，你不斷追加到你的清單而不清除它。

$('#results-list').empty();