Topic: Vue3 + Bootstrap Search Bar help

Matthew Wisen free asked 3 years ago

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.

Mikołaj Smoleński staff commented 3 years ago

Hi there Matthew,

The best way to achieve that functionality will be to prepare a json file 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:

An 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.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • 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