0

我正在使用 Spotify Search API 构建一些东西。我现在拥有的是一个输入字段，每次按下键时都会搜索 Spotify 数据库并显示最接近的 10 个结果。

我正在努力解决的问题是我想将结果的数量限制为 10，我有，但我显然把计数器放在了错误的位置，这意味着每次有一个键，另外 10结果被添加到结果列表中。

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'));
                        });
                    }
                }) 

            }
        });

    });
});

我希望我已经解释了我的要求。如果代码很差，我不是一个 Javascript 人，所以很抱歉。

4

1 回答 1

1

在这里，您需要在每个成功方法调用中清空 .dropdown-list 容器

$('.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++;
                        })
于 2013-03-16T13:06:43.140 回答