J'utilise cet extrait pour laisser l'utilisateur choisir parmi une liste de villes et les insérer dans une zone de texte, séparées par des virgules. Ça marche.jQuery: forcer un utilisateur à sélectionner une valeur dans la saisie semi-automatique suggérer dans une zone de texte
Je voudrais atteindre cet objectif: l'utilisateur écrit une partie du nom de la ville pour la rechercher, similaire à une combobox, mais s'il ne sélectionne pas l'une des options et quitte le champ, les données insérées devrait être effacé. Donc, brièvement, je voudrais mettre en place une sorte de validation qui empêche les utilisateurs de remplir le champ avec une chaîne qui n'est pas un nom de ville complet, avant de soumettre le formulaire.
Des idées?
Merci!
jQuery(function() {
var availableTags = [
"Agliè (TO)",
"Airasca (TO)",
//--- the other cities list ---
];
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
jQuery('textarea[data-wpt-id=wpcf-comuni-caldo],textarea[data-wpt-id=wpcf-comuni-freddo],textarea[data-wpt-id=wpcf-comuni-alta-potenza]')
//,input[name=wpv-wpcf-comuni-caldo],input[name=wpv-wpcf-comuni-freddo],input[name=wpv-wpcf-comuni-alta-potenza]
// don't navigate away from the field on tab when selecting an item
.on("keydown", function(event) {
if (event.keyCode === jQuery.ui.keyCode.TAB &&
jQuery(this).autocomplete("instance").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function(request, response) {
// delegate back to autocomplete, but extract the last term
response(jQuery.ui.autocomplete.filter(
availableTags, extractLast(request.term)));
},
focus: function() {
// prevent value inserted on focus
return false;
},
autoFill:true,
select: function(event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
});