2017-09-19 7 views
0

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

Répondre

0

Je résolus moi-même, comme ci-dessous.

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

 
    var valoreAttuale = ""; 
 
    jQuery('textarea[data-wpt-id=wpcf-comuni-caldo],textarea[data-wpt-id=wpcf-comuni-freddo],textarea[data-wpt-id=wpcf-comuni-alta-potenza]').focus(function() { //al primo click nel campo, memorizzo le città attuali 
 
     valoreAttuale = jQuery(this).val(); 
 
     console.log(valoreAttuale); 
 
    }); 
 

 
    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, 
 
     change: function (event, ui) 
 
     { 
 
     if (!ui.label) { this.value = valoreAttuale; } 
 
     }, 
 
     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(", "); 
 
      valoreAttuale = jQuery(this).val(); 
 
      console.log(valoreAttuale); 
 
      return false; 
 
     } 
 
     }); 
 
    });

  1. I enregistrer la valeur actuelle (valoreAttuale) sur mise au point;
  2. Si l'utilisateur sélectionne une valeur suggérée, celle-ci sera ajoutée à la zone de texte et valoreAttuale est mise à jour; Si l'utilisateur tape autre chose (pas dans le tableau), jQuery restaure la valeur précédente du champ (valoreAttuale).