d2d.emegrendeles.hu/resources/views/modules/order/supplier.blade.php

<nav class="navbar navbar-light justify-content-center mt-4">
    <form class="form-inline">
{{--
        <button type="button" class="btn btn-primary btn-lg mr-3" id="btnSort">Sort</button>
--}}
        <input class="form-control form-control-lg mr-sm-2" type="search" placeholder="Keresendő" aria-label="Search" id="search">
        <!-- <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> -->
    </form>
</nav>

<div class="card-deck">
    <div class="card-columns" >
        @foreach($suppliers as $supplier)
            <a class="supplierItem" href="#" data-id="{{$supplier['id']}}">
                <div class="card">
                    @isset($supplier['logoFile'])
                        <img class="card-img-top" src="{{url($supplier['logoFile'])}}" alt="Card image cap">
                    @endisset
                    <div class="card-body">
                        <h5 class="card-title">{{$supplier['name']}}</h5>
                        <p class="card-text">
                            @isset($supplier['product_group'])
                                @foreach($supplier['product_group'] as $productGroup)
                                    {{$productGroup['name']}},
                                @endforeach
                            @endif
                        </p>
                    </div>
                </div>
            </a>

        @endforeach




        {{--
                <a class="supplierItem" href="#" data-id="11111">
            <div class="card">
                <img class="card-img-top" src="{{asset('images/pictures/egritej.jpg')}}" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Egertej Tejipari Kft.</h5>
                    <p class="card-text">tejet, tejfölt, túrót, kefirt, natúr és ízesített joghurtokat, valamint a „Pajti” termékcsaládot, különböző kiszerelésű, zsírtartalmú és ízesítésű formában</p>
                </div>
            </div>
        </a>

        <a class="supplierItem" href="#" data-id="2227">
            <div class="card">
                <img class="card-img-top" src="{{asset('images/pictures/azsiaGasztro.jpg')}}" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Ázsia Gastro Élelmiszer Kft. </h5>
                    <p class="card-text">Ázsiai alapanyag</p>
                </div>
            </div>
        </a>

        <a class="supplierItem" href="#">
            <div class="card">
                <img class="card-img-top" src="{{asset('images/pictures/pekpont.png')}}" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Első MagyarPékpont-rendsz.Kft.</h5>
                    <p class="card-text">Péktermékek</p>
                </div>
            </div>
        </a>

        <a class="supplierItem" href="#">
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="card-title">Funkció Kft. </h5>
                    <p class="card-text">Hús, hentesárú</p>
                    <p class="card-text"><small class="text-muted">Útöbbi időbekben a legolcsobb!</small></p>
    </div>
</div>
</a>


<a class="supplierItem" href="#">
    <div class="card">
        <img class="card-img-top" src="{{asset('images/pictures/hushaz.png')}}" alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Húsház Hungary Kft.</h5>
            <p class="card-text">Hús, hentesárú</p>
        </div>
    </div>
</a>
<a class="supplierItem" href="#">
    <div class="card">
        <img class="card-img-top" src="{{asset('images/pictures/illkerfood.jpg')}}" alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Illker-Food Kft.</h5>
            <p class="card-text">Hús, hentesárú, tejtermék, konzerv, befőtt</p>
        </div>
    </div>
</a>


<a class="supplierItem" href="#">
            <div class="card">
                <img class="card-img-top" src="{{asset('images/pictures/')}}" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">xxx</h5>
                    <p class="card-text">xxx</p>
                </div>
            </div>
        </a>
--}}



        {{--<a class="supplierItem" href="#">
        <div class="card border-secondary mb-3" >
            <div class="card-header"><h5 class="card-title">Kiskacsa Kft</h5></div>
            <div class="card-body text-secondary">
                <h5 class="card-secondaryTitle">Husos</h5>
                <p class="card-text">Csak kacsakat szállít.</p>
            </div>
        </div>
        </a>
        <a class="supplierItem" href="#">
        <div class="card">
            <img class="card-img-top" src="{{asset('images/pictures/maryKerLogo2.png')}}" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Tészta Kft.</h5>
                <p class="card-text">Kész tészták minden mennyiségben</p>
            </div>
        </div>
        </a>
        <a class="supplierItem" href="#">
        <div class="card p-3">
            <blockquote class="blockquote mb-0 card-body">
                <p>Akérmit is szállítók egyik cége</p>
                <footer class="blockquote-footer">
                    <small class="text-muted">
                        Sok <cite class="card-title" title="Source Title">apróságot</cite> szállító cég
                    </small>
                </footer>
            </blockquote>
        </div>
        </a>
        <a class="supplierItem" href="#">
        <div class="card">
            <img class="card-img-top" src="{{asset('images/pictures/svg260_160.svg')}}" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Zöldség Kft.</h5>
                <p class="card-text">Friss zöldség beszállító.</p>
                <p class="card-text"><small class="text-muted">Csak piros színt rendeljünk</small></p>
            </div>
        </div>
        </a>
        <div class="card bg-info text-center p-3">
            <blockquote class="blockquote mb-0">
                <p>Már nem rendelünk ettől a cégtől</p>
                <footer class="blockquote-footer">
                    <small style="color: white">
                        Eredetileg a <cite title="Source Title">Husosfazék</cite> névre hallgatott
                    </small>
                </footer>
            </blockquote>
        </div>
        <a class="supplierItem" href="#">
        <div class="card text-center">
            <div class="card-body">
                <h5 class="card-title">Nincs logója Rt. </h5>
                <p class="card-text">Kellékanyagokat szállító arculat nélküli cég.</p>
                <p class="card-text"><small class="text-muted">Útöbbi időbekben a legolcsobb!</small></p>
            </div>
        </div>
        </a>
        <div class="card">
            <img class="card-img" src="{{asset('images/pictures/svg260_260.svg')}}" alt="Card image">
        </div>

        <div class="card p-3 text-right">
            <blockquote class="blockquote mb-0">
                <p>Ez is egyfajta üzenet megjelenési forma cím nélnül .</p>
                <footer class="blockquote-footer">
                    <small class="text-muted">
                        Ide okos idézetet írhatunk  <cite title="Source Title">Jammie Olivertől</cite>
                    </small>
                </footer>
            </blockquote>
        </div>
        <a class="supplierItem" href="#">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Tészta Kft</h5>
                <p class="card-text">Kész tészták minden mennyiségben</p>
                <p class="card-text"><small class="text-muted">Ajánlott szállító</small></p>
            </div>
        </div>
        </a>--}}
    </div>
</div>


<style>


</style>

<script>
    jQuery.expr[':'].contains = function(a, i, m) {
        return jQuery(a).text().toUpperCase()
            .indexOf(m[3].toUpperCase()) >= 0;
    };

    $('#search').keyup(function (){
        $('.card').removeClass('d-none');
        var filter = $(this).val(); // get the value of the input, which we filter on
        console.log(filter);
        console.log($('.card-deck').find('.card .card-body h5:not(:contains("'+filter+'"))').parent().parent());

        /*//eredeti verzio
        $('.card-deck').find('.card h5:not(:contains("'+filter+'"))').parent().parent().addClass('d-none');
        $('.card-deck').find('.card h5:contains("'+filter+'")').parent().parent().removeClass('d-none');
        */
        $('.card-deck').find('.card h5').parent().parent().addClass('d-none');
        $('.card-deck').find('.card h5:contains("'+filter+'")').parent().parent().removeClass('d-none');
        $('.card-deck').find('.card p:contains("'+filter+'")').parent().parent().removeClass('d-none');
    })


</script>