Auto-sélection de basée sur le champ de saisie, avec quelques mises en garde

Question

J'ai un élément SELECT dans lequel je dois sélectionner automatiquement l'option appropriée en fonction de la première moitié d'un code postal entré dans un champ de texte. britanniques sont les codes postaux de la forme AB12 3CD , où la première section se compose de 1-2 lettres représentant le comté et un nombre représentant la région dans le comté. Les 3 derniers caractères ne sont pas pertinents pour cette question.

Pour la plupart des domaines, il est basé sur la première lettre (s), mais pour certaines options, il est une gamme de code postal. Le code HTML doit expliquer le mieux:

<select id="country_field">
  <option value="">Select</option>
  <option value="AB">AB (Aberdeen)</option>
  <option value="AL">AL (St. Albans)</option>
  <option value="B">B (Birmingham)</option>
  <option value="BA">BA (Bath)</option>
  ...
  <option value="DD1">DD 1-7 (Dundee)</option>
  <option value="DD8">DD 8-11 (Dundee)</option>
  ...
</select>

Mon code ci-dessous sélectionne actuellement l'élément correct lorsque la valeur est exactement deux lettres. Mais je dois le développer pour englober les codes d'une seule lettre (Birmingham) et les plages de codes postaux (Dundee). Note: Je peux modifier les valeurs d'option s'il y a une solution qui garantit des valeurs particulières, par exemple DD1 / DD2 au lieu de DD1 / DD8.

En bref:

• B2 -> Birmingham
• BA3 -> Bain
• DD5 -> Dundee premier [DD1]
• DD11 -> deuxième Dundee [DD8]

Voici le Javascript que j'ai à ce jour ...

window.onload = function()
{
  // postcode INPUT field
  var zipInput = document.getElementById( 'zip_field' );
  // county SELECT field
  var ctySelect = document.getElementById( 'county_field' );

  zipInput.onchange = function()
  {
    var zipValue = zipInput.value;
    var ctyOptions = ctySelect.options;
    for ( i = 0; i < ctyOptions.length; i++ )
    {
      if ( zipValue.substring(0,2) == ctyOptions[i].value )
        ctyOptions[i].selected = true;
    }
  }
}

Answer 1

Vous pouvez utiliser une expression régulière pour extraire les valeurs ...

/^([a-z]{1,2})(\d*)\s/i

Ensuite, un code avec une gamme comme DD, peut-être quelque chose comme ça (pseudo-code) ...

if(match[1].value == "DD") {   // needs special processing
  range = match[2].value;
  range = range < 8 ? 1 : 8;   // if the number is less than 8, set it to 1, otherwise set it to 8
  listValue = match[1].value + range
} else                         // just use the letters to select the list item 
  listValue = match[1].value;

Alors, pour DD5, ce sera de retour et pour DD1 il retournera DD11 DD8. Quelque chose comme ou B2 simplement revenir BA3 et B BA respectivement.

Vous pouvez changer l'un if si vous avez switch plusieurs autres codes avec différentes gammes. Ensuite, définissez simplement l'élément de liste avec cette valeur que la sélection actuelle.

Answer 2

Remplacer:

zipInput.onchange = function()
  {
    var zipValue = zipInput.value;
    var ctyOptions = ctySelect.options;
    for ( i = 0; i < ctyOptions.length; i++ )
    {
      if ( zipValue.substring(0,2) == ctyOptions[i].value )
        ctyOptions[i].selected = true;
    }
  }

zipInput.onchange = function()
  {
    var zipValue = zipInput.value.match(/^[a-z]+/gi);

    var ctyOptions = ctySelect.options;
    for ( i = 0; i < ctyOptions.length; i++ )
    {
      if (zipValue[0] === ctyOptions[i].value )
        ctyOptions[i].selected = true;
    }
  }

1. Tout d'abord, nous removeed l'assign action variable de la boucle. Pourquoi les cycles de déchets répéter la même opération?
2. numéro deux, nous filtrons maintenant tout sauf les lettres du début de l'entrée.
3. Cela peut à son tour être élargi pour inclure les suffixes numériques, etc.

Answer 3

Vous pouvez comparer le début du zipValue avec les valeurs des options. Pas besoin d'expressions régulières. Il suffit d'utiliser indexOf.

  zipInput.onchange = function()
  {
    var zipValue = zipInput.value.toUpperCase();
    var ctyOptions = ctySelect.options;
    for ( i = 0; i < ctyOptions.length; i++ )
    {
      if ( zipValue.indexOf(ctyOptions[i].value) == 0 )
        ctyOptions[i].selected = true;
    }
  }

Answer 4

Je ne sais pas comment cela fonctionnerait en javascript, mais je voudrais faire quelque chose comme ce qui suit:

• Configurer vos valeurs à des expressions régulières pour correspondre à ce que vous cherchez

Alors, "B", devient "B ^ [0-9]" (je suppose qu'il doit être suivi d'un numéro)

BA devient "^ BA [0-9]"

DD1 devient "^ DD ([1-7])"

DD8 devient "^ DD ([8-9] | [1] [01])" pour correspondre DD8, DD9, DD10, DD11

Ensuite il suffit d'exécuter la regex contre votre chaîne (pas besoin de sous-chaîne comme le ^ fait que ce match se produit au début de la chaîne) et vérifier s'il y avait une rencontre idéale.