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 after I clicked the link (all my footer comes at the top) :
Here is all the error I have in my Chrome console :
Can it comes from the fact my "link" field is another page that the one I am actually on ?