0

I'm implementing an autocomplete form on a website so that mobile users can select a city. When they type the beginning of a French city, a list of cities is displayed underneath to select one.

I used jQuery like this, to call an API that returns a list of cities that look like the input :

$("#searchField").autocomplete({
target: $('#suggestions'),
minLength: 1,
source: function (request, response) {
    $.ajax({
        url: "https://api-adresse.data.gouv.fr/search/?q=" + $("input[name='ville78']").val() + "&type=municipality&autocomplete=1",
        data: {q: request.term},
        crossDomain: true,
        dataType: "json",
        success: function (data) {
            var cities = [];
            response($.map(data.features, function (item) {
                // Ici on est obligé d'ajouter les villes dans un array pour ne pas avoir plusieurs fois la même
                if ($.inArray(item.properties.postcode, cities) == -1) {
                    cities.push(item.properties.postcode);
                    return {label: item.properties.postcode + " - " + item.properties.city,
                        postcode: item.properties.postcode,
                        value: item.properties.city + ',' + item.properties.postcode
                    };

                }
            }));
        }
    });
}, link: 'indextel_1.php?ville78='

});

The problem is that when I click on a value, I'm directed to the link I've set: "indextel_1.php?ville78=..." but everything freezes. I can't click on anything, the buttons and entries are blocked, my whole page is bugged.I have to reload the brozer to unbreak everything.

What it look like before : enter image description here

What it look like after I clicked the link (all my footer comes at the top) : enter image description here

Here is all the error I have in my Chrome console : enter image description here

Can it comes from the fact my "link" field is another page that the one I am actually on ?

0