0

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.

1 Answer 1

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++;
                        })
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.