Question

我为我的应用制作了简单的搜索栏。现在它按数据属性搜索用户，但是当它找不到任何匹配时，它什么也没显示。我希望它在没有匹配时显示错误消息。我创建了if语句但它只在我输入输入并删除它时显示。如何在搜索栏找不到任何用户时立即显示错误消息。

JS

       $(document).ready(function () {
//        Pokaż/Ukryj wyszukiwarkę
        $('.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ę');
            }
        });


//        Zmiana tekstu w zależności od pojawienia się searchera
        if ($('#agents').length > 0) {
            $('#label-searchbar').html('Imię, Nazwisko, Adres email');
            $('#input-searchbar').attr('placeholder', 'Podaj imię, nazwisko lub adres email');
        } else if ($('#company').length > 0) {
            $('#label-searchbar').html('Nazwa biura');
            $('#input-searchbar').attr('placeholder', 'Podaj nazwę biura');
        }


//Dynamiczne wyszukiwanie .card dla agentów | .clearfix dla listy

        $('.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 + "' i]").show();

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

//                $(".card[data-lastname*='" + trimmedInput + "']").show();
//                $(".card[data-lastname*='" + trimmedInput + "'][data-firstname*='" + trimmedInput + "']").show();
//                $(".card[data-email*='" + 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').is(':visible').get(0)) {
                    $('.null-data').show(function () {
                        $(this).effect("shake");
                    });
                }
                if (!$('.clearfix').is(':visible').get(0)) {
                    $('.null-data').show(function () {
                        $(this).effect("shake");
                    });
                }
            } else {
                $(".clearfix.alt").show();
                $(".card").show();
                $('.null-data').show(function () {
                    $(this).effect("shake");
                });
            }

        });


    });

HTML

<div class="container">
    <div class="row">
        <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" id="label-searchbar"></label>
                            <input type="text" placeholder=""
                                   class="searcher-input form-control" id="input-searchbar"/>
                            <div class="null-data" style="display: none;">Wprowadź poprawne dane</div>

                        </div>

                    </div>

                </div>
            </div>
        </div>
        <div class="show-hide-section">
            <button class="btn btn-success show-hide-search-bar" id="searchbar-button">Pokaż wyszukiwarkę</button>
        </div>
    </div>
</div>

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

        <div class="cards">
            @foreach($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=""
                                   class="">
                                    @if(isset($agent->has_avatar) && $agent->has_avatar !== 0)
                                    <div style="background: url(''); background-size: cover;" class="photo"></div>
                                    @else
                                        <div style="background: url(''); background-size: cover;"
                                             class="photo"></div>
                                    @endif
                                </a>
                            </div>
                            <ul>
                                <li>
                                    <a href=""
                                       class="teamLink agent-color">
                                        <h3 class="agent-name">{{$agent->firstname}} {{$agent->lastname}}</h3>                                    </a>
                                </li>
                            </ul>
                            @if(isset($agent->company_name))
                            <div class="teams-summary">
                                {{$agent->company_name}}
                            </div>
                            @endif
                            <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>

Answer 1

检查元素length

........
$(".clearfix.alt").hide();

if($(".card[data-agent*='" + trimmedInput + "' i]").length == 0) {
  alert("no result");
  return;
}

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

没有匹配jQuery的搜索栏警报

1 个答案: