Webstudio
Log in

Join the Webstudio community

Updated 7 months ago

Advanced search/filter feature

At a glance

The community member has recreated an Airtable filter demo and added styles from a tutorial, and they have a question about implementing a real-time search function. They want to know if it's possible for users to start typing the product name and have the products filter as they type, without needing to click a search button. The community member is unsure if this is possible with data coming from an external source like Airtable.

In the comments, another community member suggests that implementing real-time search would require special considerations, such as potential rate limiting from the third-party API, the API/database not being optimized for real-time search, and every keystroke triggering a form submit which could make the UI/UX choppy. The commenter recommends exploring solutions designed for real-time search, such as Algolia or Typesense.

Useful resources
aajhoyhoy
·
Hi everyone,

I recreated the airtable filter demo and added the styles from the WS tutorial and I have a question regarding the search function.
https://apps.webstudio.is/builder/bd0b6bc1-dfb4-4d51-9c44-d462d12f8780?authToken=13fc61f4-2f60-45a2-9362-7ab35484d833&mode=edit
In the URL's expression editor or using some additional JavaScript can the user start typing the product name and have the products filter as the user types each letter without the need to click search?

Basically a more Realtime filter function is the goal here. I was not sure if it was possible with the data coming from an external source such as Air table so hence the query. Current expression screenshit attached.
Attachment
image.png
J
1 comment
JJohn Siciliano
Basically you'd want to form to auto submit but I see a couple issues with that.

  1. I haven't been able to get this to work reliably but have some ideas i havent tried yet.
  2. I would think that realtime search would require something special. First, every key stroke is an api call which may get you rate limited by the third party. Second, the api/database may not be optimized for search like this resulting in slow responses. Thirdly, every key stroke would trigger a form submit which I think would make the subsequent key strokes/UI/UX choppy.
I would implement something that's meant for realtime search.

No clue if these are compatible but what comes to mind is Algolia or Typesense
Add a reply
Sign up and join the conversation on Discord