Selección automática de <option> base en el campo de entrada, con algunas salvedades

Question

He SELECCIONE un elemento en el que necesito para auto-seleccione la opción apropiada basada en la primera mitad del código postal introducido en un campo de texto.British códigos postales son de la forma AB12 3CD, donde la primera sección consta de 1-2 letras que representan el condado y un número que representa el área dentro del condado.Los 3 últimos caracteres son irrelevantes para esta pregunta.

Para la mayoría de los campos se basa en sólo la primera letra(s), pero para algunas de las opciones es el código postal de la gama.El HTML se debe explicar mejor:

<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>

Mi código siguiente en la actualidad seleccione el elemento correcto cuando el valor es exactamente dos cartas.Pero necesito ampliar para abarcar de una sola letra de los códigos (Birmingham) y el código postal de rangos (Dundee).Nota:Puedo cambiar los valores de la opción de si existe una solución que garantiza valores especiales, por ejemplo,DD1/DD2 en lugar de DD1/DD8.

En resumen:

• B2 --> Birmingham
• BA3 --> Baño
• DD5 --> primer Dundee [DD1]
• DD11 --> segundo Dundee [DD8]

Aquí está el código Javascript que tengo hasta ahora...

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

Puede utilizar una expresión regular para sacar los valores...

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

Entonces, para un código con un rango como DD, tal vez algo como esto (pseudo-código)...

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;

Así, por DD5, este va a volver DD1 y para DD11 volverá DD8.Algo como B2 o BA3 simplemente volver B y BA, respectivamente.

Usted puede cambiar el if a un switch si tiene varios otros códigos con diferentes rangos.A continuación, sólo tienes que configurar el elemento de la lista con el valor de la selección actual.

Answer 2

Reemplazar:

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

Con:

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. En primer lugar, nos removeed la acción de asignación de la variable del bucle. ¿Por qué ciclos de desecho repitiendo la misma operación?
2. El número dos, ahora a filtrar todo excepto las letras en el comienzo de la entrada.
3. Esto puede a su vez ser ampliado para incluir los sufijos del número, etc.

Answer 3

Se puede comparar el comienzo de la zipValue con los valores de las opciones. No hay necesidad de expresiones regulares. Sólo tiene que usar 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

No estoy seguro de cómo funcionaría en javascript, pero me gustaría hacer algo como lo siguiente:

• Configure sus valores a ser expresiones regulares para que coincida con lo que estás buscando

Así pues, "B", se convierte en "B ^ [0-9]" (Estoy asumiendo que debe ser seguido por un número)

BA se convierte en "BA ^ [0-9]"

DD1 se convierte en "^ DD ([1-7])"

DD8 se convierte en "DD ^ ([8-9] | [1] [01])" para que coincida con DD8, DD9, DD10, DD11

A continuación, basta con ejecutar la expresión regular en contra de su cadena (sin necesidad de subcadena como el ^ se asegura de este partido se produce al comienzo de la cadena) y comprobar si había una persona compatible.