It’s been a couple times where I needed to filter a list of things based on a user keyword input. The straight way to do it is to use a constraint that displays only the items where a field contains the specified keyword, like so:
The problem is that this rule while look for whole words only… So an item with a value “hello world” won’t show up in the list if the user searches for “worl” or “hel”. Annoying… This was supposed to be fixed back in 2016 but still isn’t. I supposed they have bigger rabbits to chase.
Anyways… I came up with a simple workaround that does the job well enough for me: including a very very simple regex extraction in the constraint. Here’s how it looks:
And the regex pattern (which really is just the content of the text input in lowercase):
I can already hear some bubblers screaming “DON’T EVER USE ADVANCED FILTERS!!!” I know advanced filters and filtering after the search should be used only when needed, but hey, this is a workaround… In my real world app, I load my list of things on page load and refer to it afterwards to apply the filtering.
The rule explained:
In the above screenshot the rule only shows items for which the condition evaluates to true.
- For each item of the list, it starts by converting it to lowercase to prevent missing out on items that contain capital letters.
- Then it uses Regex to extract a substring from the content where the substring is the content of the text input (also lowercased). This is where we work around the limited “contains” built-in feature.
- The output of the Regex extraction is a list of strings that match the Regex pattern. So if the ouput list is empty, no match were found; the rule evaluates to false so the item won’t display in the list.
- Finally there is “
or Search input's value is empty”. We need this exception to show all items when the search text input is empty.
