JQuery Пользовательский интерфейс автозаполнения не показывает результаты - PullRequest
Новая
       7

JQuery Пользовательский интерфейс автозаполнения не показывает результаты

0 голосов
/ 15 февраля 2020

У меня есть HTML Форма, которая позволяет искать местоположение. Я использую автозаполнение интерфейса Jquery, чтобы результаты отображались под входом HTML.

Итак, мой код JS: 

    let villeInput = $('#villesearch');

villeInput.autocomplete({
    source: function(request, response){
        let responseArray = [];
        $.ajax({
            url: 'https://nominatim.openstreetmap.org/search/'+ villeInput.val() + '?format=json&addressdetails=1',
            type: 'GET',
            success: function (data) {
                $('#tip-cpville').show();
                let i = 0;
                data.forEach(element => {
                    if(element['address']['country_code'] == "fr"){
                        $.ajax({
                            url: 'https://nominatim.openstreetmap.org/details.php?osmtype=R&osmid=' + element['osm_id'] + '&format=json&placeid=' + element['place_id'],
                            type: 'GET',
                            success: function (dataInfo) {
                                if(dataInfo['addresstags']['postcode'] !== undefined){

                                    let cpArray = dataInfo['addresstags']['postcode'].split(';');
                                    cpArray.forEach(cp => {
                                        let availableTags =
                                            {
                                                id: i,
                                                label: cp + ' - ' + element['address']['city'],
                                                cp: cp,
                                                ville: element['address']['city']
                                            };

                                        i++;
                                        responseArray.push(availableTags);
                                    });
                                }
                            }
                        });
                    }
                });
            }, complete: function(data){
                response(responseArray);
            }
        });
    },
    select: function (e, ui) {
        $('#cp').val(ui['item']['cp']);
        $('#tip-cpville').hide();
    },
}).change(function() {

    if(villeInput.val().length === 0){
        $('#cp').val(null);
        $('#tip-cpville').show();
    }
});

В функции "done" Я получил ответ, например, массив выглядит так: (для Парижа):

{id: 0, метка: "75000 - Paris", cp: "75000",…} {id: 1, метка: "75001 - Paris", cp: "75001",…} {id: 2, метка: "75002 - Paris", cp: "75002",…} {id: 3, label : "75003 - Paris", cp: "75003",…}

... (cp - почтовый индекс)

, но ничего не отображается под формой HTML.

Но если я попытался удалить раздел ajax и заполнить массив responseArray немыми данными, он показывает тупые данные ....

Так что проблема связана с ajax, но я не знаю почему ...

У кого-нибудь есть решение?

С уважением

...