Use Case: We Want to Build a Searchable Job Board
Let’s say you:
- have a list of jobs, and
- want to allow users to search that list to filter through job titles that interest them.
What You’ll Need to Filter a Collection Based on a Search Value
- a Collection List element bound to the database with all your job listings (tutorial here)
- items in your Collection List that are bound to data fields in your job listings database (tutorial here)
- a variable that you can call “search”
- a Search element bound to your variable, whatever you’ve decided to name it
Since steps 1 and 2 are covered in other tutorials, we’ll focus on steps 3 and 4 below but make sure you’ve setup your collection and displayed it on the page before 
You won’t have anything to search otherwise!
Create a Search Variable
To create the “search” variable, head over to the “Data” tab > Variables > Add variable and use the example below.
Note that, in the screenshot above, you can see that there’s an input value associated with the search bar. This is automatically created when you drag and drop the “Search” element onto your page, so you don’t have to worry about it.
Add a Search Bar on the Page
To drag and drop the “Search” element onto the page, go to the “Add” menu > Add elements > search bar
Bind the Search Bar to the Search Variable
Once you’ve dragged and dropped it onto your page, you’ll want to bind the search bar to the “search” variable you created in step 3.
Add a Workflow to Your Search Bar
And add a workflow where:
- “On change” – i.e. every change in input will trigger the workflow
- the “search” variable is updated with the value from the input value in the search bar
- we fetch the collection to update the display
If you go into preview mode and type in a value in the search bar, your collection will now update accordingly, filtering the items in the collection based on the input value from the search bar.
