JQuery: Comment sélectionner une valeur dans une liste déroulante insensible à la casse?

Question

Mon scénario:

• J'ai une zone de texte que l'utilisateur saisit du texte
• La zone de texte a une fonction onblur qui tente de sélectionner une valeur d'un dropdownlist (si elle existe) en fonction de l'entrée de zone de texte

Cela fonctionne parfaitement bien si la valeur de la zone de texte est la même que celle de la liste déroulante. Mais je veux que ce soit insensible à la casse. Donc, si l'utilisateur tape "stackoverflow", je veux qu'il sélectionne dans la liste déroulante "StackOverflow". Comment puis-je faire cela via jQuery?

Answer 1

Voici une autre approche: trouvez la valeur correspondante dans son cas réel, "StackOverflow", et appelez val() avec cela.

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

Bien sûr, il faudrait remplacer le 'stackoverflow' littéral avec une variable.

Answer 2

Je pense que la meilleure façon de le faire est de regarder l'avant plutôt que l'après. Si vous les faites en minuscules, ils sont tous standardisés et plus faciles à utiliser. Tout ce que vous avez à faire est de faire en sorte que les entrées de l'utilisateur soient en minuscules, et il est vraiment facile de faire correspondre les choses.

Une autre option est d'utiliser une fonction de filtre, comme celui found here:

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

valeur et attribut doit être remplacé si.

Answer 3

Sur le flou, passez en revue vos options et vérifiez si elles correspondent. Ensuite, sélectionnez celui qui correspond.

Dans le code:

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

Je n'ai pas testé encore, alors assurez-vous de vérifier les erreurs de syntaxe.

Answer 4

La fonction d'expression régulière (RegExp) est probablement le chemin à parcourir.

var txt = new RegExp(pattern,attributes); 

modèle: le modèle de texte
attributs: "i" pour la casse

Vous pouvez combiner avec la fonction de filtre. quelque chose comme ça devrait fonctionner.

$("#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 

});