Home » Jquery » ajax – JQuery UI autocomplete not showing results-Exceptionshub

ajax – JQuery UI autocomplete not showing results-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I have an HTML Form which allow to search location. I use Jquery UI autocomplete to have results shown below the HTML input.

So, there is my JS code:

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

In the “done” function, I have the response returned, the array for example is look like: (for paris):

{ id: 0, label: “75000 – Paris”, cp: “75000”, … }
​{ id: 1, label: “75001 – Paris”, cp: “75001”, … } ​
{ id: 2, label: “75002 – Paris”, cp: “75002”, … } ​
{ id: 3, label: “75003 – Paris”, cp: “75003”, … }


(cp is postal code)

but nothing showing below the HTML form.

But if I tried to remove the ajax section and fill the responseArray with dumb data, it’s showing dumb data….

So the problem is related to the ajax but I don’t know why…

Does anyone have a solution ?

Regards

How to&Answer: