I am building a website that uses a sidebar to filter a collection. My particular website is based on a user’s song library, but structurally, it is similar to a website where you are searching for homes or cars and you have a sidebar of filters such as price, neighborhood, number of bedrooms, etc.
I am using Xano as the backend and am retrieving the collection dynamically. In the sidebar, I am using the single select, multi-select, date, and search bar components. Filtering is happening on the backend.
I want the user to be able to create “saved searches.” They would set their search criteria, hit a save button, and then be able to recall these searches from a dropdown. For instance, a user may have a saved search of houses in a certain zip code, with 2 bedrooms, under $400K.
Are there any best practices for this?
When they hit “save,” I plan to save their current settings / variables to my Xano database.
When a user recalls one of these saved filters, it seems straightforward to apply those values to my Xano search filters to recall that search.
But I’m not sure about the user experience. Instead of sending those values directly into the Xano filters, I wondered if it was possible to make each filter component on the sidebar recall the assigned value so that the user can continue to edit/adjust. But I’m not sure how to do that. The single select, multiselect and date picker allow you to choose an initial value, but that’s not the same as a replacement value. The search bar components could display the value as the placeholder value, but that’s not a value that is sending back to the database.
What’s the smart way to set this up?