A critical vulnerability was discovered in React Server Components (Next.js). Our Systems Remain Fully Protected. Learn More.
AI OnAI Off
Request for comment - Our search implementation in GitHub
Vote:
Hello fellow developers,
We just went through a complete search overhaul of our front-end experience. This was a long time coming and I wanted to share what we've done. If others can benefit from our work, that's great. If you have the time to comment/critique on implementation, that's much appreciated. I have to say that we borrowed heavily from some concepts here (https://www.rics.org/search-results.html?searchval=regulation&searchTag=global), so I have to give them due credit. We appreciated the layout.
Our goals:
- Create a client side search experience that required no post-backs
- Allow users to refine search results
- Allow users to filter by tagged categories
- This list is dynamic based on the config in the block
- Allow users to filter by page types
- Enable better search metrics (previous vendor delivered solution did not do this)
- Create a block that can be re-used for more specific search scenarios like
- Search only profiles on the site
- Search departments only
- Refine the search experience on mobile
Coming in future phases:
- Autocomplete
- Various sorting options
- Related queries / Did you mean
- Share your ideas please!
Implementation comments:
- We wanted to make a block that would make the client side experience customizable by the block. There are fields in the block that either filter the results server side, or enable various filtering options on the client.
Links
This code is not exactly what we have in our solution. I've tried to strip out the identifying information about our organization.
- This is the server side code we implemented https://github.com/markrullo/OptimizelySearchServer . It includes:
- Search index projections
- Search API endpoint
- Block to hold the settings
- Select all the categories to display, up to 3 sections of them
- Indicate page types to filter by
- Holds the page types to allow the client to segment by
- This is the Angular client side code for the block https://github.com/markrullo/OptimizelySearchAngular
- Calls the results endpoint and can set the max results
- Pulls the categories configured, and displays only those
- Allows filtering based on categories, and page types - This is dynamic based on the config of the block
Edited,
Oct 12, 2023 14:59
I'm just going to put a bump in here. If anyone has the time or need, this is an example of how we implemented search with our v11 instance. Does anyone have any commentary on how we did it?
Cheers
Feb 28, 2024 15:42
