jquery автозаполнение не работает при вызове ajax

Question

Я пытаюсь создать окно поиска для выбора страны с помощью автозаполнения, но сталкиваюсь с некоторой проблемой. Я использую flask для получения информации о стране, содержащей данные josn.

json файл

country_lis = [
    {
        "label": "Afghanistan"
    },
    {
        "label": "Albania"
    },
    {
        "label": "Algeria"
    },
    {
        "label": "American Samoa"
    },
    {
        "label": "Andorra"
    }]

flask маршрут:

@app.route('/auto_search_country', methods=['GET'])
def auto_search_country():
    return jsonify(country_lis)

jquery:

$(document).ready(function(){
    var country_list;
    $("#country-search").autocomplete({
        source: function (request, response) {
            req=$.ajax({
                url : '/auto_search_country',
                type : 'GET',
                dataType: 'json'
            });
            req.done(function(response) {
                country_list = response;
            });
            response(country_list);
        },
        select: function( event, ui ){
        }
        });
});

когда я набираю букву, я получаю весь список стран. Примечание: если я помещаю список стран в скрипт, он работает правильно.

работает jquery

$(document).ready(function(){
    var country_list = [
    {
        "label": "Afghanistan"
    },
    {
        "label": "Albania"
    },
    {
        "label": "Algeria"
    },
    {
        "label": "American Samoa"
    },
    {
        "label": "Andorra"
    }]
;
    $("#country-search").autocomplete({
        source:country_list,
        select: function( event, ui ){
        }
        });
});