how to fix search in
where users can use caps or lowercase?

Question

Below is JavaScript I'm using for search query there is bug i have found which is issue with letter being caps or lower case. If the letters in list are lower case then it only searches for lower case but if you were to turn the caps on it doesn't find anything. Below are the codes i'm using any help will be appreciated.

HTML

<input type='search' id='search' placeholder='search'>
<ul>
    <li>example 1</li>
    <li>example 2</li>
    <li>example 3</li>
</ul>

JavaScript

var search = $("#search");
var listItems = $("li");
search.on("keyup", function () {
    var terms = search.val();
    if (terms == '') {
        listItems.show();
    } else {
        listItems.hide();
        $("li:contains('" + terms + "')").show();
    }
});

possible duplicate of [How do I make jQuery Contains case insensitive, including jQuery 1.8+?](http://stackoverflow.com/questions/2196641/how-do-i-make-jquery-contains-case-insensitive-including-jquery-1-8) — showdev, Sep 23 '14 at 17:10

score 3 · Answer 1 · answered Sep 23 '14 at 17:08

3

You can make the terms lowercase and then search.

var terms = search.val().toLowerCase();

answered Sep 23 '14 at 17:08

Scimonster

32,893
9
77
89

Bhojendra Rauniyar · Answer 2 · 2014-09-23T17:13:58.900

2

You may use toLowerCase:

//elsewhere case may vary but here only case is ignored
$("li:contains('" + terms.toLowerCase() + "')").show();

While you consider using this elsewhere in your code:

//elsewhere case is ignored by transforming lowercase terms to search for
var terms = search.val().toLowerCase();

edited Sep 23 '14 at 17:13

answered Sep 23 '14 at 17:07

Bhojendra Rauniyar

83,432
35
168
231

score 2 · Accepted Answer · answered Sep 23 '14 at 17:09

You can overwrite existing jquery contains:

jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

var search = $("#search");
var listItems = $("li");
search.on("keyup", function () {
    var terms = search.val();
    if (terms == '') {
        listItems.show();
    } else {
        listItems.hide();
        $("li:contains('" + terms + "')").show();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='search' id='search' placeholder='search'>
<ul>
    <li>example 1</li>
    <li>example 2</li>
    <li>example 3</li>
</ul>

Or create a new one:

    jQuery.expr[':'].ncontains = function(a, i, m) {
      return jQuery(a).text().toUpperCase()
          .indexOf(m[3].toUpperCase()) >= 0;
    };



var search = $("#search");
var listItems = $("li");
search.on("keyup", function () {
    var terms = search.val();
    if (terms == '') {
        listItems.show();
    } else {
        listItems.hide();
        $("li:ncontains('" + terms + "')").show();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='search' id='search' placeholder='search'>
<ul>
    <li>example 1</li>
    <li>example 2</li>
    <li>example 3</li>
</ul>

thanks alex it worked :) is there better way to improve the search in list? — iam tery, Sep 23 '14 at 18:45
There are lot search filters out there. For example take a look here http://www.phpgang.com/how-to-make-search-input-to-filter-through-list-using-jquery_642.html but i think this one is ok too :) — Alex Char, Sep 23 '14 at 18:55

how to fix search in where users can use caps or lowercase?

3 Answers3

how to fix search in
where users can use caps or lowercase?