feat: initial datalist

resources/views/components/forms/datalist.blade.php

@@ -0,0 +1,44 @@
+<div class="w-full">
+    <label>
+        @if ($label)
+            {{ $label }}
+            @if ($required)
+                <x-highlighted text="*" />
+            @endif
+            @if ($helper)
+                <x-helper :helper="$helper" />
+            @endif
+        @endif
+        <input list={{ $id }} {{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
+            wire:dirty.class.remove='dark:text-white' wire:dirty.class="text-black bg-warning" wire:loading.attr="disabled"
+            name={{ $id }}
+            @if ($attributes->whereStartsWith('wire:model')->first()) {{ $attributes->whereStartsWith('wire:model')->first() }} @else wire:model={{ $id }} @endif
+            @if ($attributes->whereStartsWith('onUpdate')->first()) wire:change={{ $attributes->whereStartsWith('onUpdate')->first() }} wire:keydown.enter={{ $attributes->whereStartsWith('onUpdate')->first() }} wire:blur={{ $attributes->whereStartsWith('onUpdate')->first() }} @else wire:change={{ $id }} wire:blur={{ $id }} wire:keydown.enter={{ $id }} @endif>
+        <datalist id={{ $id }}>
+            {{ $slot }}
+        </datalist>
+    </label>
+    @error($id)
+        <label class="label">
+            <span class="text-red-500 label-text-alt">{{ $message }}</span>
+        </label>
+    @enderror
+    {{-- <script>
+        const input = document.querySelector(`input[list={{ $id }}]`);
+        input.addEventListener('focus', function(e) {
+            const input = e.target.value;
+            const datalist = document.getElementById('{{ $id }}');
+            if (datalist.options) {
+                for (let option of datalist.options) {
+                    // change background color to red on all options
+                    option.style.display = "none";
+                    if (option.value.includes(input)) {
+                        option.style.display = "block";
+                    }
+
+
+                }
+            }
+        });
+    </script> --}}
+</div>