设置jQuery中显示的Spotify响应数量的限制

Question

I'm building something using the Spotify Search API. What I have at the minute is an input field which searches the Spotify database each time there is a key up and displays the nearest 10 results.

The thing I am struggling with is that I want to limit the number of results to just 10, which I have, but I've obviously got the counter in the wrong place, which means that each time there is a key up, another 10 results are added to the results list.

jQuery(document).ready(function($) {

    var searchResult = null;  

    $('.spotify-input').each(function() { 

        var elem = $(this);

        // Save current value of element
        elem.data('oldVal', elem.val());

        // Look for changes in the value
        elem.bind("propertychange keyup input paste", function(event) {

            // If value has changed...
            if (elem.data('oldVal') != elem.val()) {

                // Updated stored value
                elem.data('oldVal', elem.val());

                // Do action
                query = $(this).val();
                $.ajax({
                    url: 'http://ws.spotify.com/search/1/track.json',
                    dataType: 'json',
                    data: {q: query},
                    timeout: 30000,
                    beforeSend: function (xhr) {
                        self._activeQueryXHR = xhr;
                    },
                    complete: function (xhr, textStatus) {
                        if (self._activeQueryXHR === xhr)
                            self._activeQueryXHR = null;
                    },
                    success: function (data, textStatus, xhr) {
                        console.log(data);
                        var searchResult = data;

                        i = 0;
                        $.each(data.tracks, function(index, track) {

                            //Set the limit for the number of responses
                            if(i < 11) {
                                //Track details
                                console.log(track.name);
                                $('<li class=\"spotify-result\">'+track.name+track.artists[0].name+'</li>').appendTo($('.dropdown-list'));
                            }
                            //For each result, add +1 to the counter
                            i++;
                        })
                        //On-click Stuff
                        $('.spotify-result').click(function() {
                            $(this).clone().appendTo($('.selected-list'));
                        });
                    }
                }) 

            }
        });

    });
});

I hope I've explained what I require. I'm not a Javascript guy so apologies if the code is poor.

Answer 1

Here you need to empty .dropdown-list container in each success method call

$('.dropdown-list').empty();
 $.each(data.tracks, function(index, track) {

                            //Set the limit for the number of responses
                            if(i < 11) {
                                //Track details
                                console.log(track.name);
                                $('<li class=\"spotify-result\">'+track.name+track.artists[0].name+'</li>').appendTo($('.dropdown-list'));
                            }
                            //For each result, add +1 to the counter
                            i++;
                        })