adding properties to compute model options on search property. currently set to .debounce.250ms in themes, this allows use to control those options without override the themes.

Author: bdelamatre

resources/views/bootstrap-4/includes/search.blade.php

@@ -1,7 +1,7 @@
 @if ($showSearch)
     <div class="mb-3 mb-md-0 input-group">
         <input
-            wire:model.debounce.250ms="filters.search"
+            wire:model{{ $this->searchFilterOptions }}="filters.search"
             placeholder="{{ __('Search') }}"
             type="text"
             class="form-control"

resources/views/bootstrap-5/includes/search.blade.php

@@ -1,7 +1,7 @@
 @if ($showSearch)
     <div class="mb-3 mb-md-0 input-group">
         <input
-            wire:model.debounce.250ms="filters.search"
+            wire:model{{ $this->searchFilterOptions }}="filters.search"
             placeholder="{{ __('Search') }}"
             type="text"
             class="form-control"

resources/views/tailwind/includes/search.blade.php

@@ -1,7 +1,7 @@
 @if ($showSearch)
     <div class="flex rounded-md shadow-sm">
         <input
-            wire:model.debounce.250ms="filters.search"
+            wire:model{{ $this->searchFilterOptions }}="filters.search"
             placeholder="{{ __('Search') }}"
             type="text"
             class="flex-1 shadow-sm border-cool-gray-300 block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo @if (isset($filters['search']) && strlen($filters['search'])) rounded-none rounded-l-md @else rounded-md @endif"

src/Traits/WithFilters.php

@@ -7,12 +7,62 @@
  */
 trait WithFilters
 {
+    /**
+     * Filter values
+     *
+     * @var array
+     */
     public array $filters = [];
+
+    /**
+     * Map filter names
+     *
+     * @var array
+     */
     public array $filterNames = [];
+
+    /**
+     * Default filters
+     *
+     * @var array|null[]
+     */
     public array $baseFilters = [
         'search' => null,
     ];
 
+    /**
+     * @var int
+     */
+    public ?int $searchFilterDebounce = null;
+
+    /**
+     * @var bool
+     */
+    public ?bool $searchFilterLazy = null;
+
+    /**
+     * @var bool
+     */
+    public ?bool $searchFilterDefer = null;
+
+    /**
+     * Build livewire model options for the search input
+     *
+     * @return string
+     */
+    public function getSearchFilterOptionsProperty()
+    {
+        if ($this->searchFilterLazy) {
+            return '.lazy';
+        } elseif($this->searchFilterDefer) {
+            return '.defer';
+        }elseif($this->searchFilterDebounce){
+            return '.debounce.' . $this->searchFilterDebounce . 'ms';
+        }else{
+            return '';
+        }
+    }
+
     public function resetFilters(): void
     {
         $search = $this->filters['search'] ?? null;