I have a search bar and I want to search as the user types from the REST API endpoint.
There is a workflow on the search bar for “on change” to re-fetch the collection, utilizing the “search bar - value” in the endpoint
The problem: It is VERY glitchy.
Sometimes as I’m not even typing anything, the collection will fetch. Or, it will jump a lot, and search in the wrong order (the previous character change is still searching).
Is there a way to make this work efficiently and look good?
Take a look at one example at 6 seconds in this video:
I guess that I should ask this also … Is filtering on the server side the best way to do this? Or should I do it on the client side with a filter in WeWeb?
I was going to query the API on change because the initial query will return 1000’s of results. I thought it would be better to only send the filtered results instead of sending the huge payload and then filtering on the client side.
Hi Kevin,
You were right to do the filtering on the server side considering the huge payload.
The issue here is that you are using the “search bar - value” in the endpoint.
The search bar element has a nice debounce feature that improves a lot of the user experience. I know it’s not obvious. What you need to do:
Create a search variable
Create a workflow with an “on change” trigger on the search bar. In the workflow:
Update the search variable with the search bar - value of the input
Refetch the collection
Use the search variable in your filters or in your API requests
Customize the “debounce time” in the search settings
