小寫和大寫的數據屬性搜索

Question

我創建了搜索欄，用於查找來自 laravel 后端的代理名稱。 現在它正在工作，當用戶輸入第一個大寫字母然后是小寫字母時，它會搜索代理。 我希望它在用戶首先輸入大寫字母然后輸入小寫字母、所有小寫字母和所有大寫字母時查找代理。 你對我的問題有什么建議嗎？

HTML/刀片.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

在屬性名稱搜索中將i用作不區分大小寫的選擇器

 $(".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" /> 

Answer 2

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