In this episode, we tackle adding a search component to our books page! The goal is for users to type in a search term and see the list of books filter live. We walk through building the search input right at the top of the book list (no need for a separate Livewire component here), and even tweak the pagination so there are more results on the page.
Once the search input is set up, we hook up the input field to a new property (named query
) with Livewire's wire:model.live binding. This means as you type, Livewire instantly updates the component, and with a debounce of 300ms, we avoid hammering the server with too many requests.
We then update the render method in our component, so it uses the value of query
to filter book titles and authors using a simple fuzzy "like" search in the database. It's not the most advanced search, but perfect for this use case. The list updates live as you type without needing to click a search button.
Next, we make it even better by wiring the search up to the URL query string using Livewire's URL attribute. This means your search term stays put when you refresh the page or share the link – super handy! We show how to customize the query string key, and even play with browser history for back/forward navigation. Finally, we check that pagination still works smoothly when you're searching, with the current query and page being tracked perfectly.
By the end of the episode, you've got a fully functional, reactive search with persistent state, and you know how to swap out the search logic for something fancier in the future if you want.