Filament•12mo ago

Search on Navigation Menu

is it possible to have a searchbar in the navigation menu to let the user search for resources or pages? Example attached.

Solution:

Here yo go; ```html <x-filament::input.wrapper class="px-4 my-4"> <x-filament::input...

Jump to solution

9 Replies

Dennis Koch•12mo ago

You could probably add a searchbar with a render hook and add some logic to filter those

aleronal_•2mo ago

Hey @Dennis Koch or anyone! I’m new to Filament and I’m loving it so far, but could you or do you have an example on how to implement this? Thank you very much in advance!!

Dennis Koch•2mo ago

There is an example on FilamentExamples by Laravel Daily. But it's part of their paid examples: https://filamentexamples.com/project/filament-search-above-sidebar-navigation?source=search

Filament Examples

Moving Global Search to Sidebar

Sometimes, we do not want things to be placed in the default position. In this case, we are talking about a search bar. But did you know that you can easily move it to the sidebar?

MaxwellDan•2mo ago

$99 😢

Solution

Azad Furkan ŞAKAR•2mo ago

Here yo go;

<x-filament::input.wrapper class="px-4 my-4">
    <x-filament::input
        type="search"
        placeholder="Search navigation..."
        x-ref="search"
        x-data="sidebarSearch()"
        x-on:input.debounce.300ms="filterItems($event.target.value)"
        x-on:keydown.escape="clearSearch"
        x-on:keydown.meta.k.prevent.document="$refs.search.focus()"
    />
</x-filament::input.wrapper>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('sidebarSearch', () => ({
            init() {
                this.$refs.search.value = ''
            },

            filterItems(searchTerm) {
                const groups = document.querySelectorAll('.fi-sidebar-nav-groups .fi-sidebar-group')

                searchTerm = searchTerm.toLowerCase()

                groups.forEach(group => {
                    const items = group.querySelectorAll('.fi-sidebar-item')
                    let hasVisibleItems = false

                    items.forEach(item => {
                        const text = item.textContent.toLowerCase()
                        const isVisible = text.includes(searchTerm)

                        item.style.display = isVisible ? '' : 'none'

                        if (isVisible) {
                            hasVisibleItems = true
                        }
                    })

                    group.style.display = hasVisibleItems ? '' : 'none'
                })
            },

            clearSearch() {
                this.$refs.search.value = ''
                this.filterItems('')
            }
        }))
    })
</script>

<x-filament::input.wrapper class="px-4 my-4">
    <x-filament::input
        type="search"
        placeholder="Search navigation..."
        x-ref="search"
        x-data="sidebarSearch()"
        x-on:input.debounce.300ms="filterItems($event.target.value)"
        x-on:keydown.escape="clearSearch"
        x-on:keydown.meta.k.prevent.document="$refs.search.focus()"
    />
</x-filament::input.wrapper>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('sidebarSearch', () => ({
            init() {
                this.$refs.search.value = ''
            },

            filterItems(searchTerm) {
                const groups = document.querySelectorAll('.fi-sidebar-nav-groups .fi-sidebar-group')

                searchTerm = searchTerm.toLowerCase()

                groups.forEach(group => {
                    const items = group.querySelectorAll('.fi-sidebar-item')
                    let hasVisibleItems = false

                    items.forEach(item => {
                        const text = item.textContent.toLowerCase()
                        const isVisible = text.includes(searchTerm)

                        item.style.display = isVisible ? '' : 'none'

                        if (isVisible) {
                            hasVisibleItems = true
                        }
                    })

                    group.style.display = hasVisibleItems ? '' : 'none'
                })
            },

            clearSearch() {
                this.$refs.search.value = ''
                this.filterItems('')
            }
        }))
    })
</script>

and register your admin panel provider;

$panel
            ->renderHook(PanelsRenderHook::SIDEBAR_NAV_START, fn () => view('filament.components.search')) // or where you located your blade file
...

$panel
            ->renderHook(PanelsRenderHook::SIDEBAR_NAV_START, fn () => view('filament.components.search')) // or where you located your blade file
...

This is not for search resources or pages, but you can search navigation items. You can write a custom method for search resources and pages.

aleronal_•2mo ago

Thank you very much @Azad Furkan ŞAKAR!!! I’ll take a look to the above! 🙌🏼🙌🏼

Azad Furkan ŞAKAR•2mo ago

https://gist.github.com/afsakar/92d1ac808034afed2e25dbba469e300e You welcome! You can find more here about this component.

aleronal_•2mo ago

For anyone else looking for this same feature, the code by @Azad Furkan ŞAKAR works like a charm! Million thanks again!! 🙌🏼

Azad Furkan ŞAKAR•2mo ago

Your very welcome! 🙏🏼

Gaming

Programming

Search on Navigation Menu

Did you find this page helpful?