javascript - 小写和大写的数据属性搜索

Question

我创建了搜索栏来查找来自 laravel 后端的代理名称。现在它正在工作，当用户输入第一个大写字母然后是小写字母时，它会搜索代理。我希望它在用户首先输入大写字母然后输入小写字母、所有小写字母和所有大写字母时查找代理。你对我的问题有什么建议吗？

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

在属性名称搜索中使用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" />