Cara menampilkan data dengan 2 style yang berbeda

Selamat malam, izin bertanya.

search1.PNG

disini saya mempunyai data dgn tampilan card (card header & body) dimana data card header merupakan "tag" dan card body merupakan "module". jadi dalam satu tag (card header) bisa mempunyai banyak module (card body)

search2.PNG

kemudian, jika ada nilai di form search tampilan berubah seperti gambar di atas. dan jika form search kosong, tampilannya berubah lagi seperti gambar pertama.

search3.PNG

disini saya sudah berhasil membuat ketika form ada nilai, tampilannya bisa seperti gambar kedua. tapi ktika form search kosong lagi, tampilannya masih seperti gambar di atas(belum sperti gambar pertama yg ada card header)

pertanyaan saya, gimana ya cara agar ktika form search kosong, tampilannya bisa berubah lg seperti gambar pertama ?

berikut saya sertakan kode yg sdh sy buat.

kode utk menampilkan modal & data

<div class="modal-body">
                <form>
                    <div>
                        <label for="title" class="type-paragraph1">
                            All available digital module type created by your company author.
                        </label>
                        <div class="form-group mb-1 pr-3">
                            <input type="text" id="searchInput" class="form-control" placeholder="Type to search modules">

                        </div>
                    </div>
                    <div class="form-group self_paced_module" id="module_library_list">
                        <div class="digital-module-head"></div>
                        <div id="dataDigitalList"></div>
                        <div id="moduleList"></div>
                        <input type="hidden" id="digital_title" name="digital_title[]">
                        <input type="hidden" id="digital_no" name="digital_no[]">
                        <div class="digital-module" id="digital_container"></div>
                    </div>
                </form>
            </div>

Kode jquery utk melakukan pencarian

$('#searchInput').on('keyup', function (element) {
        $('#dataDigitalList').hide();
        $('#moduleList').show();
        var inputs = $('#searchInput').val().toLowerCase();
        var container = $('#moduleList');
        var count = 0;

        container.find('.module_filter').each(function () {
            if ($(this).text().toLowerCase().search(inputs) > -1) {
                $(this).parents('.card').show();
                count++;
            }
            else {
                $(this).parents('.card').hide();
            }
        });

        if (!count) {
            $('#no_module_found').show();
        }
        else {
            $('#no_module_found').hide();
        }
    });

*jadi ketika form search kosong, data dgn id="dataDigitalList" yang ditampilkan. Ketika search form terisi, data dgn id="moduleList" yang ditampilkan.

bagaimana cara yg benar utk membuat fitur tersebut ? terimkasih