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;
}

What ever input you get, Convert that input in lower case by using strtolower() function. — Saquib Lari, Jul 17 '17 at 08:41
But I need to do it on a frontend side of app. I don't want to use php functions. — Konrad Uciechowski, Jul 17 '17 at 08:43
When you add the `data-` values, make them all lowercase, then convert user-input to lower case and compare. — freedomn-m, Jul 17 '17 at 08:45
Alternatively, don't use data- selector and compare directly: https://stackoverflow.com/questions/619621/how-do-i-use-jquery-to-ignore-case-when-selecting?rq=1 — freedomn-m, Jul 17 '17 at 08:45
Possible duplicate of [Is there a case insensitive jQuery :contains selector?](https://stackoverflow.com/questions/187537/is-there-a-case-insensitive-jquery-contains-selector) — freedomn-m, Jul 17 '17 at 08:46
And another: https://stackoverflow.com/questions/2196641/how-do-i-make-jquery-contains-case-insensitive-including-jquery-1-8?rq=1 — freedomn-m, Jul 17 '17 at 08:46
use toLowerCase() in javascript to convert the input in lowercase. — Saquib Lari, Jul 17 '17 at 08:47
`$(".card[data-agent*='" + trimmedInput + " i']").show(); $(".clearfix[data-name*='" + trimmedInput + " i']").show();` — Yogen Darji, Jul 17 '17 at 08:51

Yogen Darji · Accepted Answer · 2017-07-17T09:03:49.643

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" />

Thank you so much you saved my project! – Konrad Uciechowski Jul 17 '17 at 09:08 — Konrad Uciechowski, Jul 17 '17 at 09:08

score 0 · Answer 2 · answered Feb 16 '22 at 08:25

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);
        }
});

Data attribute search with lower case and upper case

2 Answers2