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;
and register your admin panel provider;
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.
<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.
