Enge Ergebnisse durch Eingabe von Groß- und Kleinschreibung Problem

Question

Ich habe ein Suchfeld, das die verfügbaren Optionen in einem Dropdown-Menü auf der Tastatur begrenzt. Ich habe ein Problem mit der Groß-/Kleinschreibung - wie kann ich diese Funktion ändern, um sicherzustellen, dass meine option Groß- oder Kleinschreibung des eingegebenen Zeichens enthält?

Fiddle: https://jsfiddle.net/g2q8hvf4/
Beachten Sie, wie die Ergebnisse unterscheiden zwischen 'i' und 'I'

$(document).on('keyup', '#condition-search', function(e) { 
 
    var str = $('#condition option:contains(' + $(this).val() + ')'); 
 
    if (str) { 
 
    $('#condition option').hide(); 
 
    str.show(); 
 
    } else { 
 
    $('#condition option').show(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="form-control" id="condition-search"> 
 
<select class="form-control" id="condition" size="15" style="overflow-y: scroll" ;> 
 
     <option class="cat-1">Item1</option> 
 
     <option class="cat-2">item2</option> 
 
     <option class="cat-3">Item3</option> 
 
     <option class="cat-4">item4</option> 
 
     <option class="cat-5">Item5</option> 
 
    </select>

Answer 1

Sie können die filter() Methode verwenden und sowohl die Abfrage konvertieren und den aktuellen Text in Kleinbuchstaben vor dem Vergleich:

$(document).on('keyup', '#condition-search', function(e) { 
 
    var query = $(this).val().toLowerCase(); 
 
    var str = $('#condition option').filter(function() { 
 
    return $(this).text().toLowerCase().includes(query); 
 
    }); 
 
    if (str) { 
 
    $('#condition option').hide(); 
 
    str.show(); 
 
    } else { 
 
    $('#condition option').show(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="form-control" id="condition-search"> 
 
<select class="form-control" id="condition" size="15" style="overflow-y: scroll" ;> 
 
     <option class="cat-1">Item1</option> 
 
     <option class="cat-2">item2</option> 
 
     <option class="cat-3">Item3</option> 
 
     <option class="cat-4">item4</option> 
 
     <option class="cat-5">Item5</option> 
 
    </select>

Answer 2

würde ich die eingegebene Zeichenkette in seiner Kleinen Version vergleichen, um Ihr verfügbare Liste item Klein Versionen (JavaScript ist toLowercase() verwenden).