Rest API Searching Glitches

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:

Thank you,

1 Like

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.

1 Like

It depends how quickly your backend is responding. Also, we setup a debounce by default to prevent overloading the browser with events :wink:

On a small sample of data (<100), I would do it only client-side. This will prevent glitches!

1 Like

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:

  1. Create a search variable
  2. 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

2022-05-11 08.37.02

  1. Use the search variable in your filters or in your API requests
  2. Customize the “debounce time” in the search settings

Tell me if that fixes your issue!

1 Like

Thank you. That resolved the double loading. Awesome!

2 Likes