I want to search Search Results without Reloading page

I have a working Livewire component that displays the shortcuts from a Shortcut model. I have a search input and button in the component view that filters the returned results when the search button is clicked. The problem is that the page reloads in order to display the filtered results. How can I get the page to update the filtered results when the search button is pressed WITHOUT reloading the page?

This is my Livewire Component:

<?php
// app/Http/Livewire/ShortcutList.php

namespace App\Http\Livewire;

use App\Models\Shortcut;
use Livewire\Component;
use Livewire\WithPagination;

class ShortcutList extends Component
{
    use WithPagination;

    public $search;
    public $sortBy = 'position';
    public $sortDirection = 'asc';

    protected $queryString = [
        'search' => ['except' => ''],
        'sortBy',
        'sortDirection',
    ];


    public function render()
    {
        $shortcuts = Shortcut::query()
            ->filter(['search' => $this->search])
            ->orderBy($this->sortBy, $this->sortDirection)
            ->paginate(10); // Set the number of shortcuts per page, adjust as needed

        return view('livewire.shortcut-list', [
            'shortcuts' => $shortcuts,
        ]);
    }

}

The view for this Livewire component is as as follows:

{{-- resources/views/livewire/shortcut-list.blade.php --}}

<form class="mb-3">
    <!-- BEGIN input-group -->
    <div class="input-group input-group-lg mb-0 shadow-1 rounded">

        <input type="text" class="form-control shadow-inset-2" id="search" name="search"
       aria-label="type 2 or more letters" placeholder="Search shortcuts...">
        <div class="input-group-append">
            <button class="btn btn-primary hidden-sm-down waves-effect waves-themed" type="submit"><i
                    class="fal fa-search mr-lg-2"></i><span class="hidden-md-down">Search</span></button>

        </div>
    </div>
    <div align="center" class="mb-0"> [ <a href="{{route('shortcut.index')}}">Clear Search</a>]</div>
    <!-- END input-group -->
</form>

<table class="table table-bordered">
    <thead>
        <tr>
            <th>Shortcut</th>
            <th style="width:50px">Sort Order</th>
            <th style="width:150px">Tools</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($shortcuts as $shortcut)
            <tr>
                <td class="sortable-handle">
                    <h5 class="card-title mb-1">{{ $shortcut->title }}</h5>
                    <p class="card-text"><a href="{{ $shortcut->url }}">{{ $shortcut->url }}</a></p>
                </td>
                <td><input type="text" value="{{ $shortcut->sortorder }}" style="width:50px"></td>
                <td class="text-right">
                    <!-- Create New -->
                    <a class="btn btn-primary btn-icon waves-effect waves-themed" href="{{ route('shortcut.create') }}" role="button">
                        <i class="fal fa-fw fa-plus"></i>
                    </a>
                    <!-- Edit -->
                    <a class="btn btn-primary btn-icon waves-effect waves-themed" href="{{ route('shortcut.edit', $shortcut->id) }}" role="button">
                        <i class="fal fa-fw fa-edit"></i>
                    </a>
                    <!-- Trash -->
                    <a class="btn btn-primary btn-icon waves-effect waves-themed" href="{{ route('shortcut.destroy', $shortcut->id) }}" role="button">
                        <i class="fal fa-fw fa-trash"></i>
                    </a>
                </td>
            </tr>
        @endforeach
    </tbody>
</table>

<div>
    {{-- {{ $shortcuts->links() }} Add pagination links --}}
</div>

The model for Shortcuts looks like this:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Shortcut extends Model
{
    protected $fillable = [
        'title',
        'url',
        'icon',
        'description',
        'tags',
        'sortorder',
        'status'
    ];

    public function scopeFilter($query, array $filters) {
        if($filters['tag'] ?? false) {
            $query->where('tags', 'like', '%' . request('tag') . '%');
        }
        if($filters['search'] ?? false) {
            $query->where('title', 'like', '%' . request('search') . '%');
        }
    }
}

Any help in solving this would be greatly appreciated.