Data attribute search with lower case and upper case

Question

I created searchbar with looking for names of agents that comes from laravel backend. Right now it is working that when user type first upper case letter and then lower case it search for agents. I want it to look for agents when user type first upper case and then lower case, all lower cases and all upper cases. Do you have any tip for my problem?

HTML/BLADE.PHP

    <div class="container">
    <div class="row">
        <div class="show-hide-section">
            <button class="btn btn-success show-hide-search-bar">Pokaż wyszukiwarkę</button>
        </div>
        <div class="col-xs-12 col-md-12">
            <div class="searcher-section" style="display: none">
                <div class="show-hide-searcher">
                    <div class="input-section">

                        <div class="label-input-searcher">
                            <label for="" class="searcher-label">Imię, Nazwisko, Adres email</label>

                            <input type="text" placeholder="Podaj Imię, Nazwisko lub Adres email"
                                   class="searcher-input form-control"/>
                            <div class="null-data" style="display: none;">Wprowadź poprawne dane</div>
                        </div>

                    </div>

<div class="container">
    <div class="row">
        <h3 class="title" id="agents">Doradcy</h3>

        {{----}}
        <div class="cards">
            @foreach($company_agents as $agent)
                <div class="col-xs-12 col-sm-5 col-md-4">

                    <div class="card" data-agent="{{$agent->firstname}} {{$agent->lastname}} {{$agent->email}}">
                        <figure>
                            <div class="img-ref">
                                <a href="{{URL::action("", array('pageId' => $page->id, 'objectId' => $object->id, 'companyId' => $company->id, 'agentId' => $agent->id))}}"
                                   class="">
                                    @if(isset($agent->has_avatar) && $agent->has_avatar !== 0)
                                        <div style="background: url('{{$staticUrl . 'images/users/' . $agent->company_id . '/' . $agent->id . '_max.jpg?' . rand(1,99999)}}'); background-size: cover;"
                                             class="photo"></div>
                                    @else
                                        <div style="background: url(''); background-size: cover;"
                                             class="photo"></div>
                                    @endif
                                </a>
                            </div>
                            <ul>
                                <li>
                                    <a href="{{URL::action("", array('pageId' => $page->id, 'objectId' => $object->id, 'companyId' => $company->id, 'agentId' => $agent->id))}}"
                                       class="teamLink">
                                        <h3 class="agent-name">{{$agent->firstname}} {{$agent->lastname}}</h3></a>
                                </li>
                            </ul>
                            <div class="teams-summary">
                                {{$company->name}}
                            </div>
                            <div class="contact-position">
                                {{--telefon kontaktowy--}}
                                <div class="mobile-info card-contact-info">
                                    {{$agent->phone}}
                                </div>
                                {{--adres mailowy--}}
                                <div class="email-info card-contact-info">
                                    {{$agent->email}}
                                </div>
                            </div>
                        </figure>
                    </div>
                </div>
            @endforeach
        </div>
        {{----}}
    </div>
</div>

JS

    $(document).ready(function () {
          var lowerAgentName = $(".card").text().toLowerCase();
          var upperAgentName = $(".card").text().toUpperCase();
          console.log(lowerAgentName);
          console.log(upperAgentName);
//        var lowerAgentName = $('h3.agent-name').text().toLowerCase();
//        var lowerAgentName = $(".card").text().toLowerCase();
//        var upperAgentName = $('h3.agent-name').text().toUpperCase();


        $('.show-hide-search-bar').on('click', function () {
            if ($('.searcher-section').is(":visible")) {
                $('.searcher-section').hide("slide");
                $('.show-hide-search-bar').text('Pokaż Wyszukiwarkę');
            } else {
                $('.searcher-section').show("slide");
                $('.show-hide-search-bar').text('Ukryj Wyszukiwarkę');
            }
        });


        $('.searcher-input').keyup(function (event) {
            $('.null-data').hide();
            if ($(this).val()) {
                var input = $(this).val();
                var trimmedInput = input.trim();
                var terms = input.split(/\W+/g);
                $(".card").hide();

                $(".clearfix.alt").hide();
                $(".card[data-agent*='" + trimmedInput + "']").show();
                $(".clearfix[data-name*='" + trimmedInput + "']").show();


                $(".col-xs-12").css("min-height", "0");
                $(".col-md-4").css("min-height", "0");
                $(".col-sm-5").css("min-height", "0");
                if (!$('.card:visible').get(0)) {
                    $('.null-data').show();
                }
                if (!$('.clearfix:visible').get(0)) {
                    $('.null-data').show();
                }
            } else {
                $(".clearfix.alt").show();
                $(".card").show();
                $('.null-data').show();
            }

        });

    });

CSS

        a {
        text-decoration: none;
    }

    .card {
        margin: 10px auto;
        background-color: white;
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        padding: 10px;
        height: 300px;

    }

    .cardHover {
        -webkit-box-shadow: 0 0 10px rgba(207, 168, 168, 1);
        -moz-box-shadow: 0 0 10px rgba(207, 168, 168, 1);
        box-shadow: 0 0 15px rgba(207, 168, 168, 1);
    }

    .photo {
        border-radius: 50%;
        height: 150px;
        width: 150px;
        background-color: white;
        margin: 0 auto;
        background-position: 50% 50%;
        -webkit-box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, 0.3);
        box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, 0.3);
    }

    .card ul {
        list-style: none;
        text-align: center;
        padding-left: 0;
    }

    .img-ref {
        display: block;
        margin-right: auto;
        margin-left: auto;
        width: 160px;
        height: 160px;
    }

    .agent-name {
        height: 25px;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 16px;
        text-align: center;
    }

    .card-contact-info.mobile-info {
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100px;
        position: absolute;
        left: 0;
    }

    .card-contact-info.email-info {
        overflow: hidden;
        flex: 1;
        text-overflow: ellipsis;
        position: absolute;
        right: 0;
    }

    .contact-position {
        position: relative;
        font-size: 11px;
        display: flex;
        bottom: 5px;
    }

.searcher-section {
    display: block;
}

.searcher-label {
}

.searcher-button {
    padding: 10px 40px;
    margin-top: 10px;
}

.select-section {
    float: right;
}

.searcher-input {
    height: 40px;
}

.input-section {
    width: 70%;
    float: left;
}

.label-input-searcher {
    margin: 10px 0;
}

.show-hide-section {
    margin: 15px;

}

.show-hide-search-bar {
    display: table-cell;
    vertical-align: bottom;
}

Answer 1

HTML:

<div class="card" data-agent="TEST1">TEST1</div>
        <div class="card" data-cmpname="test2">test2</div>
        <div class="card" data-cmpname="teSt3">teSt3</div>
        <input class="searcher-input" id="srch_by_cmp_name" />

js:

$("#srch_by_cmp_name").keyup(function (e) {
var str = $(this).val();
var matchFound = 0;
$('.card').each(function() {
   var currentElement = $(this).data("cmpname").toLowerCase();
   //var currentElement = $(this).data("cmpname").toUpperCase();
   var hasTest = currentElement.includes(str);
   if(hasTest == true){
       $(this).show();
       matchFound += 1;
   }else{
      $(this).hide();
      //matchFound -= 1;
   }
});
        if(matchFound>0){
            $("#noRecordFound").hide();
            $(':input[type="submit"]').prop('disabled', false);
        }else{
            $("#noRecordFound").show();
        }
        if(str.length==0){
            $(':input[type="submit"]').prop('disabled', true);
        }
});

Answer 2

Use i as case insensitive selector in attribute name search

 $(".card[data-agent*='" + trimmedInput + "' i]").show();
 $(".clearfix[data-name*='" + trimmedInput + "' i]").show();

 $('.searcher-input').keyup(function (event) {
  var input = $(this).val();
  var trimmedInput = input.trim();
  var terms = input.split(/\W+/g);
  $(".card").hide();

  $(".card[data-agent*='" + trimmedInput + "' i]").show();
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="card" data-agent="TEST1">TEST1</div>
<div class="card" data-agent="test2">test2</div>
<div class="card" data-agent="teSt3">teSt3</div>


<input class="searcher-input" />