Narrow results by typing case sensitivity issue [duplicate]

213
June 06, 2017, at 03:56 AM

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>

Answer 1

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>

Answer 2

I'd compare the entered string in its lowercase version (using javascript's toLowercase() ) to your available list item's lowercase versions.

READ ALSO
Navigate to id in Content widget from Text widget on Wordpress page

Navigate to id in Content widget from Text widget on Wordpress page

I have a Wordpress page with a text widget containing a select dropdown menu, along with a JQuery function to scroll to an id of a dl element in a separate content widget on the same pageThe dl elements are contained within separate columns on a different...

255
Fucntion parameter values to replace the integer from a string

Fucntion parameter values to replace the integer from a string

I have a function the parameter has more than one values which I'm passing them after a loopI want to use the values Im getting to replace integers in a string by there older

202
How to Fix a Dynamic Document Size Error?

How to Fix a Dynamic Document Size Error?

I have a Menu-list, and when I pass the mouse hover an item display another list, but this list is larger and change the height of the documentThis create a bug in the page

274
Stopping a Horizontal Scroller JQuery

Stopping a Horizontal Scroller JQuery

I am creating a horizontal scroller that you can click to scroll through images and everything scrolls fine, but I am not sure how I get the scroller to stop at the last pictureWhat I was trying to do was stop it at a certain pixel width but that is inconsistent

334