Narrow results by typing case sensitivity issue

Question

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>

https://stackoverflow.com/questions/187537/is-there-a-case-insensitive-jquery-contains-selector — Chris, Jun 05 '17 at 18:55

score 2 · Accepted Answer · answered Jun 05 '17 at 18:56

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>

score 0 · Answer 2 · answered Jun 05 '17 at 18:56

0

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

answered Jun 05 '17 at 18:56

arsea

86
4

Narrow results by typing case sensitivity issue

2 Answers2