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 に答える