About LiveSearchPro
About LiveSearchPro
About
LiveSearchPro is a Framer code component that adds a search bar with an animated dropdown that filters results as visitors type. It works with Framer CMS through a companion LiveSearchItem component, builds category filters from your data, highlights matching text, and supports the keyboard and screen readers.
What you can customize
Choose CMS or Manual data. For CMS, add a Collection List to the page, place a LiveSearchItem inside its item, and bind Title, Description, Category, Icon, Image and Link to your CMS fields. Give both components the same Search ID. The items stay invisible on the live site. Manual results take an icon, title, description and category. Clicking a result, or pressing Enter on it, opens its link if it has one; otherwise its title fills the search field. You can also set suggested searches (a fixed list shown when the field is empty), categories, placeholder, empty-state icon, loading animation duration, max results, accent, background, text, border and hover colors, and input, title and description fonts.the mobile breakpoint (Mobile Below)
Great for (examples)
Add LiveSearchPro to:
* Blogs and documentation sites
* Product catalogs and e-commerce
* Resource libraries and tutorial hubs
* Portfolio and agency filtering
* Directories and job boards
* Navigation bars on large sites
The canvas shows a static search field, and each LiveSearchItem shows a small label so bindings are easy to check. Search, CMS results and animations run in Preview and on your published site. Arrow keys move through results, Enter selects, Escape closes the dropdown.
Share your build
Shipped something cool with it? Post it on X and tag me @Dulajweb. I'd love to see it.
Need help?
Questions or feedback? Reach me at dulajdilshan766@gmail.com or on X @Dulajweb.
