In this episode, we're taking our app's navigation to the next level by adding a global search bar right into the top nav. This means that, no matter where you are in the app, you'll be able to start typing and instantly see matching products show up in a dropdown list below the search input.
We kick things off by moving over to our Livewire navigation component, which is where we'll build the search. We discuss why this is done in Livewire (so we can hook into server-side searches), but also note that something like Alpine.js might have been even snappier for this kind of UI. For now, though, we're keeping it in Livewire for simplicity.
To implement it, we add a styled search input in the navbar and tie it to a searchQuery property using wire:model. Every time the input changes, a request is sent to our server, which then queries Melisearch via Laravel Scout and returns matching products. These results are displayed as a simple dropdown under the search.
We also look at efficiency: out of the box, each keystroke sends a new request, which could be a bit much! So, we debounce the input by 500ms, reducing the number of server hits as the user types.
Other nice touches include displaying a friendly message if no products are found, linking search results directly to the product page, and providing a "clear search" option to reset the search easily. At the end, we test it out: you can quickly search, see results live, click through, and even handle cases where nothing matches—all from your global nav!
This is the foundation for a super-handy global product search. Feel free to style and tweak it further to fit your project!