Narrow results by typing case sensitivity issue [duplicate]
This question already has an answer here:
- Is there a case insensitive jQuery :contains selector? 10 answers
I have a search box that limits options available in a dropdown menu on keyup. I'm having an issue with case sensitivity - how can I modify this function to ensure my option contains upper or lower case versions of the character typed?
Fiddle: https://jsfiddle.net/g2q8hvf4/
Notice how the results differ between 'i' and '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>You can use the filter() method and convert both the query and the current text to lower case before comparing:
$(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>I'd compare the entered string in its lowercase version (using javascript's toLowercase() ) to your available list item's lowercase versions.
-
09:10
I'm not able to pass the state value to the method or function in React [closed]
-
08:50
How to access array index of Cloud Firestore using query in Flutter?
-
08:40
Getting an unwanted space between Nav Items in Navbar Angular
-
04:20
PHP Script INSERT INTO SELECT does not insert, with no errors [closed]
-
12:40
SQL query to select students who have taken all subjects from subjects table
-
10:40
-
08:10
-
06:10
Displaying Dynamic placeholder content on Textbox in ReactJS
-
05:30
Extracting Parameters from Redirect URI - QuickBooks API / Python
- search for elements in a list 102879 visits
- typescript: tsc is not recognized as an internal or external command, operable program or batch file 96940 visits
- In Chrome 55, prevent showing Download button for HTML 5 video 93262 visits
- RxJS5 - error - TypeError: You provided an invalid object where a stream was expected 90671 visits
- Ionic 2 - how to make ion-button with icon and text on two lines? 87502 visits
- NetBeans IDE - ClassNotFoundException: net.ucanaccess.jdbc.UcanaccessDriver 55756 visits
- Adding methods to es6 child class 19971 visits
