Filament•7mo ago

table column searchable() search on pressing enter

Is there a way I can make it so that the search input only searches when I press enter instead of searching after I stopped typing?

3 Replies

Hemith•7mo ago

@props([
    'wireModel' => 'tableSearch',
])

<div
    x-id="['input']"
    {{ $attributes->class(['fi-ta-search-field']) }}
>
    <label x-bind:for="$id('input')" class="sr-only">
        {{ __('filament-tables::table.fields.search.label') }}
    </label>

    <x-filament::input.wrapper
        inline-prefix
        prefix-icon="heroicon-m-magnifying-glass"
        prefix-icon-alias="tables::search-field"
        :wire:target="$wireModel"
    >
        <x-filament::input
            autocomplete="off"
            inline-prefix
            :placeholder="__('filament-tables::table.fields.search.placeholder')"
            type="search"
            :wire:model.live.debounce.500ms="$wireModel"
            x-bind:id="$id('input')"
            :wire:key="$this->getId() . '.table.' . $wireModel . '.field.input'"
        />
    </x-filament::input.wrapper>
</div>

@props([
    'wireModel' => 'tableSearch',
])

<div
    x-id="['input']"
    {{ $attributes->class(['fi-ta-search-field']) }}
>
    <label x-bind:for="$id('input')" class="sr-only">
        {{ __('filament-tables::table.fields.search.label') }}
    </label>

    <x-filament::input.wrapper
        inline-prefix
        prefix-icon="heroicon-m-magnifying-glass"
        prefix-icon-alias="tables::search-field"
        :wire:target="$wireModel"
    >
        <x-filament::input
            autocomplete="off"
            inline-prefix
            :placeholder="__('filament-tables::table.fields.search.placeholder')"
            type="search"
            :wire:model.live.debounce.500ms="$wireModel"
            x-bind:id="$id('input')"
            :wire:key="$this->getId() . '.table.' . $wireModel . '.field.input'"
        />
    </x-filament::input.wrapper>
</div>

I found this search-field.blade.php file and I copied it to my resources folder. I can't seem to figure out how to trigger the search only on button press.

a trendy name•7mo ago

you can update the line

            :wire:model.live.debounce.500ms="$wireModel"

            :wire:model.live.debounce.500ms="$wireModel"

to remove the .live.debounce.500ms but then you'll need to add a submit button

Hemith•7mo ago

@props([
    'wireModel' => 'tableSearch',
])

<div
    x-id="['input']"
    {{ $attributes->class(['fi-ta-search-field']) }}
>
    <label x-bind:for="$id('input')" class="sr-only">
        {{ __('filament-tables::table.fields.search.label') }}
    </label>
    <x-filament::input.wrapper
        inline-prefix
        prefix-icon="heroicon-m-magnifying-glass"
        prefix-icon-alias="tables::search-field"
        :wire:target="$wireModel"
    >
        <x-filament::input
            autocomplete="off"
            inline-prefix
            :placeholder="__('filament-tables::table.fields.search.placeholder')"
            type="search"
            :wire:model="$wireModel"
            wire:keydown.enter="getModelLabel"
            x-bind:id="$id('input')"
            :wire:key="$this->getId() . '.table.' . $wireModel . '.field.input'"
        />
    </x-filament::input.wrapper>
</div>

@props([
    'wireModel' => 'tableSearch',
])

<div
    x-id="['input']"
    {{ $attributes->class(['fi-ta-search-field']) }}
>
    <label x-bind:for="$id('input')" class="sr-only">
        {{ __('filament-tables::table.fields.search.label') }}
    </label>
    <x-filament::input.wrapper
        inline-prefix
        prefix-icon="heroicon-m-magnifying-glass"
        prefix-icon-alias="tables::search-field"
        :wire:target="$wireModel"
    >
        <x-filament::input
            autocomplete="off"
            inline-prefix
            :placeholder="__('filament-tables::table.fields.search.placeholder')"
            type="search"
            :wire:model="$wireModel"
            wire:keydown.enter="getModelLabel"
            x-bind:id="$id('input')"
            :wire:key="$this->getId() . '.table.' . $wireModel . '.field.input'"
        />
    </x-filament::input.wrapper>
</div>

I did it like this. It's a bit hacky but it seems to work well.

Gaming

Programming

table column searchable() search on pressing enter