Best way to structure a search bar
Unanswered
Swedish Lapphund posted this in #help-forum
Swedish LapphundOP
So I am relatively new to frontend development, and I've been wondering how to structure a search bar.
So I've got a few idea's, but I was wondering if there's another (better) way to go about it. But since I want my search bar to be able to find pages, sections in pages, I need to somehow map these. Is it common to have some sort of predefined structure, that has to be updated when sections or pages are added?
So I've got a few idea's, but I was wondering if there's another (better) way to go about it. But since I want my search bar to be able to find pages, sections in pages, I need to somehow map these. Is it common to have some sort of predefined structure, that has to be updated when sections or pages are added?
32 Replies
Swedish LapphundOP
Like, having some form of json, with the page, then the sections from the page, and the right router links. Do some matching and showcase anything that comes close to what the user types.
I ask because something like this because a pain to maintain, especially when there's a multitude of people writing in the code base. Is there are smarter way to go about this, is this previously implemented in a form of a package?
hi, Is the purpose of the search bar to find pages and contents within it? How are you going to use it, can you describe from user perspective?
@roopaish hi, Is the purpose of the search bar to find pages and contents within it? How are you going to use it, can you describe from user perspective?
Swedish LapphundOP
Yes, basically there's a dashboard, so there's quite a bit of content. I'd say broadly speaking, each dashboard item as I'll call it has content in it. I would like for the user to find the page itself and sections within it.
All three redirect to a specific section where someone van see the invoices (there are different types of invoices)
I would be able to somehow mark a "section" as searchable for instance, and then dynamically fetch it and it's route? Basically create a wrapper for how we define a section in html. That'd work, if it's useful at all.
maybe you could request the html content of the pages that you made searchable and group it like
[{page:string, content:[{section:section-1, content: parsedString with text only from html}]}]/page#section-idSwedish LapphundOP
So basically fetch this when starting the frontend, parse it and save it in a format like that and then that gives the ability to search simply based on file and section name, or even the content of a section itself?
Mhm, this requires a very consistent way of specifying sections i guess, using things like
<h> would work(?)if the data in the pages don't change you can save it in database, or do a cron job every 1 hour to save it in db, and use the data in db
i would suggest doing this in backend
Swedish LapphundOP
how so
how frequent the data changes in any pages
i guess its fully dynamic
Swedish LapphundOP
Not at all I reckon, i do not plan on supporting searching user data as of now
meaning that's dynamic because the user is using the frontend
that'd be, well a problem for later if I ever decide to solve that one
oh so it remains static for most cases?
Swedish LapphundOP
In the form of releases, we update the frontend with new pages/functionality
which in turn, requires our search bar to update
yes mostly static, unless you count thing like user data, tables, etc. We dont want that exception the sections of it searchable.
well then, it might be easier, for the sections you could use ids, i guess ids are not that commonly used for other things, so whenever you see ids, you can mark that as section and parse the content inside that element as text and save it in the grouped data
or you might as well just do this manually and make the searchable data by yourself
[{page:string, content:[{section:section-1, content: parsedString with text only from html}]}]Swedish LapphundOP
Mhm thats fair, makes sense, I will give it a try and see what I cook up with. Thanks for your help!
sure np
@roopaish sure np
Swedish LapphundOP
Any experience with vue.js?
no none
@roopaish no none
Swedish LapphundOP
I see, fair enough. What about breadcrumbs in general. I think i read somewhere I can automatically get those done by based on the route (granted I routed my pages properly), I assume thats common practice?
you can get the pathname useing usePathname
then split the path by / to get array of paths
and map each items to make breadcrumbs
then split the path by / to get array of paths
and map each items to make breadcrumbs
and make changes as needed