Topic: Vue3 + Bootstrap Search Bar help
I'm new to Vue 3 and Bootstrap and I'm having trouble figuring out how to get a search box functioning.
I'm building a website that has 5 pages using router-link and the number of pages will increase over time. Each page will have 1 picture that I need to be searchable. There's no text on the pages just the pictures themselves.
I'm using an MDBootstrap navbar with a search box already on it but I need to figure out how to script it so if someone were to search for, let's say, "car" for example, then they'd be given a list of the pages with car pictures to click on and go to that page.
The lessons I've been taking for Vue 3 have not taught search boxes at all so I'm at a bit of a lose.
Can someone point me in the right direction? Either a tutorial or some help with the code? I've seen some videos about searching but those were all about api's and I need others to search my website, not an api.
Thank you for the help.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: MDB5 1.0.0-beta3
- Device: Laptop
- Browser: Opera
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Mikołaj Smoleński staff commented 3 years ago
Hi there Matthew,
The best way to achieve that functionality will be to prepare a
jsonfile that will contain all paths to your pages with their names. Then you will need to fetch it and filter it while typing inside the search field (@input event). Other good option will be to use our Select component with search field. Here's an example: https://mdbootstrap.com/docs/b5/vue/forms/select/#section-searchAn example json structure: { "name": "Home page", "path": "/" }, { "name": "Contact page", "path": "/contact" }, ...
Keep coding, Mikołaj from MDB
Matthew Wisen free commented 3 years ago
Thank you for the help Mikolaj. I'll give it a try and see how it goes.