JQuery: ¿Cómo selecciono un valor de una lista desplegable sin distinción de mayúsculas y minúsculas?

Question

Mi escenario:

• Tengo un cuadro de texto que el usuario introduce texto
• El cuadro de texto tiene una función onBlur que intenta seleccionar un valor de una lista desplegable (si existe) en base a la entrada de texto

Esto funciona perfectamente bien si el valor del cuadro de texto es el mismo caso que el valor de la lista desplegable. Pero quiero que sea insensible a mayúsculas y minúsculas.

Así que si el usuario escribe "stackoverflow" entonces quiero que seleccione de la lista desplegable "StackOverflow". ¿Cómo puedo hacer esto a través de jQuery?

Answer 1

Aquí hay otro enfoque: encontrar el valor coincidente en su caso real, "stackoverflow", y llamar val() con eso.

var matchingValue = $('#select option').filter(function() { 
     return this.value.toLowerCase() == 'stackoverflow'; 
    }).attr('value');  
    $('#select').val(matchingValue); 

Por supuesto, el literal 'stackoverflow' debe sustituirse por una variable.

Answer 2

Creo que la mejor manera de hacerlo es mirar desde el antes que el después. Si los convierte en minúsculas, están estandarizados y son más fáciles de usar. Entonces, todo lo que tiene que hacer es hacer que la entrada del usuario sea minúscula, y es realmente fácil hacer coincidir cosas.

Otra opción es utilizar una función de filtro, como el que found here:

$('something').filter(function() { 
     return (new RegExp(value, "i")).test($(this).attr('attribute')); 
    }); 

valor y el atributo que ser reemplazado sin embargo.

Answer 3

En desenfoque, itere sobre sus opciones y verifique si coinciden. Luego seleccione el que coincida.

En código:

$("#button").blur(function(){ 
    var val = $(this).val(); 
    $("#list option").each(function(){ 
    if($(this).text().toLowerCase() == val) $(this).attr("selected","selected"); 
    }); 
}); 

No he probado todavía, así que asegúrese de comprobar los errores de sintaxis.

Answer 4

La función de expresión regular (RegExp) es probablemente el camino a seguir.

var txt = new RegExp(pattern,attributes); 

patrón: el patrón de texto
atributos: "i" de entre mayúsculas y minúsculas

Se puede combinar con la función de filtro. Algo como esto debería funcionar.

$("#textbox").blur(function() { 

    var text = $(this).val(); 

    var dropdownlist = 
     $("select").filter(function() { 
      return (new RegExp(text, "i")).test($(this).attr("id")); 
     }); 

    // do something to dropdownlist 

});