How can I make my search input to work properly?

I’m really new into web dev and I’m working on a project which uses the TALL stack:

  • Laravel Mix;
  • Livewire;
  • AlpineJS and;
  • TailwindCSS.

My search input works correctly only when I look for something that exists in my table, because if it does not exist, everything that exists in the div that contains it is deleted, including the input itself.

I already tried to move it into the table div, but the table and it are still being deleted.

Here is the BackEnd code:

class DepositTransactionsTableManager extends Component {

use WithPagination;

public $generic_search = '';



    /**
     * Get the current user of the application.
     *
     * @return mixed
     */

public function render() {
        $term = $this->generic_search;
        $transactions = $this->getUserProperty()->invoiceCrypto()->where(function($q) {
                    $q->orWhereNotNull("return_url");
                })->whereIn("type", ['deposit'])->where("amount", "<>", 0);

        if ($term != '') {
            $transactions = $transactions->where(function($q) use($term) {
                        $q->orWhere("address", "like", "%$term%");
                        $q->orWhere("created_at", "like", "%$term%");
                        $q->orWhere("txid", "like", "%$term%");
                    })->orderBy("id", "desc")->paginate(10);
        } else {
            $transactions = $transactions->orderBy("id", "desc")->paginate(10);
        }

        $this->wallet = $this->getUserProperty()->wallet()->join('coins', 'wallets.short_name', '=', 'coins.short_name')->get(['wallets.*', 'wallets.id as wallet_id', 'coins.*']);
        return view('livewire.deposit-transactions-table-manager', ['transactions' => $transactions]);
    }

FrontEnd code:

<div>
<div class="flex flex-col space-y-6">
    <x-slot name="responsive-title">
        @push('firstTitle')
        <svg ...></svg>
        <span class="ml-4 text-tiny font-medium text-letscrypto-green">{{__("Merchant")}}</span>
        @endpush
        @push('secondTitle')
        <svg ...><span class="ml-4 text-tiny font-medium text-letscrypto-green">{{__("Deposits")}}</span>
        @endpush
    </x-slot>

    <div class="hidden md:flex relative overflow-hidden px-4 py-6 mb-6 bg-low-white rounded-xl">
        <svg ...></svg>
        <div class="flex-shrink-0 text-center mx-auto w-full max-w-xs md:max-w-sm lg:max-w-2xl">
            <h3 class="text-left text-2xl sm:text-4xl xl:text-5xl font-light text-letscrypto-green-lighter">
                {{__("Deposits")}}
            </h3>
            <p class="mt-2 text-left text-xs md:text-sm lg:text-md text-gray-300">
                {{__("Merchant Deposit Breadcrumbs 1")}}
                <span class="text-letscrypto-green">{{__("Merchant Deposit Breadcrumbs 2")}}</span>.
            </p>
            <x-subtitle />
        </div>
    </div>

    @if(count($transactions)>0)
    <div class="block lg:hidden">
        @if($merchant==1)
        <div class="w-full block lg:hidden" style="height: 70px;">
            <div class="min-w-2 w-1/2" style="width: 100%; float: left;">
                <div class="relative rounded-md mt-1">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <svg ...></svg>
                    </div>
                    <input wire:model="generic_search" type="text" name="generic_search" id="generic_search" class="block w-full pl-10 sm:text-sm rounded-md bg-letscrypto-extradark lets-input border" placeholder="{{__("Search")}}">
                </div>
            </div>
        </div>
        @endif
        <div>
            @foreach($transactions as $item)
            <div class="tile-list-wrapper flex flex-col md:hidden w-full space-y-2 px-4 py-5 bg-letscrypto-extradark border-b border-opacity-20 border-white">
                <div class="w-full inline-flex justify-between items-center">
                    <span class="text-xs font-medium tracking-wider text-right text-gray-500 uppercase">{{__("Currency")}}</span>
                    <img class="mr-2 rounded-full h-9 w-9" src="{{asset('/assets/images/icons/currencies')}}/{{Str::upper($item->cripto_short_name)}}.png" alt="">
                </div>
                <div class="w-full inline-flex justify-between items-center">
                    <span class="text-xs font-medium tracking-wider text-right text-gray-500 uppercase">{{__("Date")}}</span>
                    <div class="inline-flex items-center">
                        <div class="flex flex-col text-sm font-medium text-gray-600 whitespace-nowrap items-end">
                            <span>{{formatedDate($item->created_at)}}</span>
                            <span>{{formatedHour($item->created_at)}}</span>
                        </div>
                    </div>
                </div>
                <div class="w-full inline-flex justify-between items-center">
                    <span class="text-xs font-medium tracking-wider text-right text-gray-500 uppercase">{{__("E-mail")}}</span>
                    <span class="text-sm font-medium text-gray-600 w-48 break-words text-right">{{$item->external_user_email}}</span>
                </div>
                <div class="w-full inline-flex justify-between items-center">
                    <span class="text-xs font-medium tracking-wider text-right text-gray-500 uppercase">{{__("Address")}}</span>
                    <span class="text-sm font-medium text-gray-600 w-48 break-words text-right">{{$item->getCleanAddress()}}</span>
                </div>
                <div class="w-full inline-flex justify-between items-center">
                    <span class="text-xs font-medium tracking-wider text-right text-gray-500 uppercase">{{__("Currency")}}/{{__("Operation")}}</span>
                    @if($item->type=='deposit')
                    <div style="height: 42px;" class="flex flex-col justify-between items-end">
                        <span class="text-sm font-medium text-letscrypto-primary whitespace-nowrap capitalize">{{Str::upper($item->cripto_short_name)}} {{__($item->type)}}</span>
                        <span class="px-2 text-xs font-bold capitalize text-letscrypto-green-lighter bg-low-white rounded-lg w-min-content">+{{abs($item->amount)}}</span>
                    </div>
                    @else
                    <div style="height: 42px;" class="flex flex-col justify-between items-end">
                        <span class="text-sm font-medium text-letscrypto-red whitespace-nowrap capitalize">{{Str::upper($item->cripto_short_name)}} {{__($item->type)}}</span>
                        <span class="px-2 text-xs font-bold text-red-500 capitalize bg-low-white rounded-lg w-min-content">+{{abs($item->amount)}}</span>
                    </div>
                    @endif
                </div>
                <div class="w-full pt-4 inline-flex justify-end">
                    @if(is_null($item->txid))
                    <button type="button" class="group inline-flex items-center px-6 py-0.5 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md bg-low-white bg-opacity-25 text-yellow-300 hover:text-yellow-200 transition duration-200 focus:outline-none">
                        <div class="relative inline-block text-left">
                            <svg ...></svg>
                        </div>
                        {{__("Pending")}}
                    </button>
                    @else
                    <button type="button" class="group inline-flex items-center px-6 py-0.5 border border-transparent shadow-sm text-sm leading-4 font-medium rounded-md text-letscrypto-green-light hover:text-letscrypto-green-lighter bg-low-white bg-opacity-25 transition duration-200 focus:outline-none">
                        <div class="relative inline-block text-left">
                            <svg ...></svg>
                        </div>
                        {{__("Confirmed")}}
                    </button>
                    @endif
                </div>
            </div>
            @endforeach
        </div>
        {{ $transactions->links() }}
    </div>
    @endif

    <div class="flex flex-col">
        <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
            <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
                @if(count($transactions)>0)
                @if($merchant==1)
                <div class="w-full hidden lg:block" style="height: 70px;">
                    <div class="min-w-2 w-1/2" style="width: 33.3%; float: left;">
                        <div class="relative rounded-md mt-1">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                    <path fillRule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clipRule="evenodd" />
                                </svg>
                            </div>
                            <input wire:model="generic_search" type="text" name="generic_search" id="generic_search" class="block w-full pl-10 sm:text-sm rounded-md bg-letscrypto-extradark lets-input border" placeholder="{{__("Search")}}">
                        </div>
                    </div>
                </div>
                @endif

                <div class="hidden md:flex flex-col border border-transparent sm:rounded-lg">
                    <table class="min-w-full divide-y divide-gray-500 divide-opacity-25">
                        <thead>
                            <tr>
                                <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase bg-low-white">
                                    {{__("Currency")}}/{{__("Date")}}
                                </th>
                                <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase bg-low-white">
                                    {{__("E-mail")}}
                                </th>
                                <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase bg-low-white">
                                    {{__("Address")}}
                                </th>
                                <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase bg-low-white">
                                    {{__("Currency")}}/{{__("Operation")}}
                                </th>
                                <th scope="col" class="px-6 py-3 text-xs font-medium tracking-wider text-center text-gray-500 uppercase bg-low-white">
                                    {{__("Status")}}
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-letscrypto-extradark">
                            @foreach($transactions as $item)
                            <tr wire:click="showDetails('{{ $item->p_uuid }}')" class="hover:bg-letscrypto-dark cursor-pointer">
                                <td class="px-6 py-4">
                                    <div class="flex items-center justify-center">
                                        <div class="flex items-center flex-shrink-0 w-10 h-10">
                                            <img class="mr-4 rounded-full h-9 w-9" src="{{asset('/assets/images/icons/currencies')}}/{{Str::upper($item->cripto_short_name)}}.png" alt="">
                                        </div>
                                        <div class="flex flex-col items-center ml-4">
                                            <div class="text-sm font-medium text-left text-gray-300">
                                                {{formatedDate($item->created_at)}}
                                            </div>
                                            <div class="inline-flex items-center w-full text-xs text-left text-gray-500">
                                                <svg ...></svg>
                                                {{formatedHour($item->created_at)}}
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-sm text-center text-gray-500 align-middle italic">
                                    {{$item->external_user_email}}
                                </td>
                                <td class="px-6 py-4 text-sm text-center text-gray-500 align-middle italic">
                                    {{$item->getCleanAddress()}}
                                </td>
                                <td class="px-6 py-4 text-center whitespace-nowrap">
                                    <p class="text-xs font-semibold text-letscrypto-primary capitalize">{{Str::upper($item->cripto_short_name)}} {{__($item->type)}}</p>
                                    <span class="px-2 text-xs font-bold capitalize text-letscrypto-green-lighter bg-low-white rounded-lg w-min-content">+{{abs($item->amount)}}</span>
                                </td>

                                <td class="px-6 py-4 text-sm text-center text-gray-500 align-middle italic">
                                    @if(is_null($item->txid))
                                    <button ...>
                                            <svg ...></svg>
                                        </div>
                                        {{__("Pending")}}
                                    </button>
                                    @else
                                    <button ...>
                                            <svg ...></svg>
                                        </div>
                                        {{__("Confirmed")}}
                                    </button>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                    {{ $transactions->links() }}
                </div>
                @endif
            </div>
        </div>
    </div>

    <x-jet-dialog-modal wire:model="showModalDetails">
        <x-slot name="title"></x-slot>
        <x-slot name="content">
            <div>
                @if($type=='deposit')
                <div class="flex items-center justify-center w-16 h-16 mx-auto bg-letscrypto-green-light bg-opacity-25 rounded-full animate-pulse">
                    <svg ...></svg>
                </div>
                @else
                <div class="flex items-center justify-center w-16 h-16 mx-auto bg-letscrypto-green-light bg-opacity-25 rounded-full animate-pulse">
                    <svg ..."></svg>
                </div>
                @endif
                <div class="text-left">
                    <div>
                        <div class="overflow-hidden sm:rounded-lg">
                            <div class="mt-3 mb-5 text-center">
                                <h3 class="text-normal font-medium leading-6 text-white">
                                    @if($type=='deposit')
                                    {{__("Received Transaction")}}
                                    @else
                                    {{__("Transaction Sent")}}
                                    @endif
                                </h3>
                                <p class="max-w-2xl mt-2 text-sm text-gray-500">
                                    @if($type=='deposit')
                                    {{__("Check below the details of the payment received")}}
                                    @else
                                    {{__("Check the details of the payment sent below")}}

                                    @endif
                                </p>
                            </div>
                            <div class="border-t border-gray-800">
                                <dl>
                                    <div class="px-4 py-5 bg-letscrypto-dark sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                                        <dt class="text-sm self-center font-medium text-gray-500">
                                            {{__("Blockchain Transaction")}}
                                        </dt>
                                        <dd class="mt-1 self-center text-sm break-all sm:mt-0 sm:col-span-2 text-letscrypto-green">
                                            <div id="link">{{$txId}}</div>
                                        </dd>
                                    </div>

                                    <div class="px-4 py-5 bg-letscrypto-dark sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                                        <dt class="text-sm self-center font-medium text-gray-500">
                                            {{__("Address")}}
                                        </dt>
                                        <dd class="mt-1 self-center text-sm break-all sm:mt-0 sm:col-span-2 text-letscrypto-green">
                                            {{$address}}
                                        </dd>
                                    </div>

                                    <div class="px-4 py-5 bg-low-white sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                                        <dt class="text-sm self-center font-medium text-gray-500">
                                            {{__("Gross amount")}}
                                        </dt>
                                        <dd class="mt-1 self-center text-2xl uppercase sm:mt-0 sm:col-span-2 text-letscrypto-green-lighter">
                                            <b>{{$total}} {{$symbol}} </b>
                                        </dd>
                                    </div>
                                    <div class="px-4 py-5 bg-low-white sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                                        <dt class="text-sm self-center font-medium text-gray-500">
                                            {{__("Fee")}}
                                        </dt>
                                        <dd class="mt-1 self-center text-2xl uppercase sm:mt-0 sm:col-span-2 text-letscrypto-green-lighter">
                                            <b>{{$tax}} {{$symbol}} </b>
                                        </dd>
                                    </div>
                                    <div class="px-4 py-5 bg-low-white sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                                        <dt class="text-sm self-center font-medium text-gray-500">
                                            {{__("Payment value")}}
                                        </dt>
                                        @if($type=='deposit')
                                        <dd class="mt-1 self-center text-2xl uppercase sm:mt-0 sm:col-span-2 text-letscrypto-green-lighter">
                                            <b>+{{$amount}} {{$symbol}} </b>
                                        </dd>
                                        @else
                                        <dd class="mt-1 self-center text-2xl uppercase sm:mt-0 sm:col-span-2 text-letscrypto-green-lighter">
                                            <b>{{$amount}} {{$symbol}} </b>
                                        </dd>
                                        @endif
                                    </div>
                                    <div class="sm:grid sm:grid-cols-3 sm:gap-4 bg-letscrypto-extradark">
                                        <dd class="self-center text-sm text-letscrypto-green sm:col-span-2 md:col-span-3">
                                            @if($symbol=="eth" || $symbol=="dby" )
                                            <a href="{{$txIdLink}}" target="_blank" class="...">{{__("View on Etherscan")}}</a>

                                            @else
                                            <a href="{{$txIdLink}}" target="_blank" class="...">{{__("View on Blockchain")}}</a>


                                            @endif

                                            @if($type=='withdrawn')
                                            <button type="button" data-clipboard-text="{{ $txId }}" class="...>
                                                {{__("Copy Proof Link")}}
                                                <svg ....>
                                                </svg>
                                                <svg ...
                                                </svg>
                                            </button>
                                            @endif
                                        </dd>
                                    </div>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </x-slot>
        <x-slot name="footer"></x-slot>

        @push('scripts')
        <script>
            var clipboardButton = new ClipboardJS('.copy-button');

            clipboardButton.on('success', function(e) {
            
            ...
        </script>
        @endpush
    </x-jet-dialog-modal>
</div>

Thanks in advance.

Answer

Your search field is inside a conditional:

@if (count($transactions) > 0)

So if you have no $transactions everything inside that @if directive is not displayed. You need to move your search field outside of the @if. You probably want to move it above the @if.

I am assuming that the @if ($merchant == 1) should wrap your search input:

@if($merchant==1)
<div class="w-full hidden lg:block" style="height: 70px;">
    <div class="min-w-2 w-1/2" style="width: 33.3%; float: left;">
        <div class="relative rounded-md mt-1">
            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <svg class="..." /></svg>
            </div>
            <input wire:model="generic_search" type="text" name="generic_search" id="generic_search" class="block w-full pl-10 sm:text-sm rounded-md bg-letscrypto-extradark lets-input border" placeholder="{{__("Search")}}">
        </div>
    </div>
</div>
@endif

@if (count($transactions) > 0)
...
@endif