# TUTORIAL – Search a Collection List **URL:** \ **Category:** Tutorials\ **Tags:** search\ **Created:** [January 25, 2022, 6:41pm UTC](https://community.weweb.io/t/tutorial-search-a-collection-list/196 "2022-01-25T18:41:10Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\ **Post date:** [January 25, 2022, 6:41pm UTC](https://community.weweb.io/t/tutorial-search-a-collection-list/196/1 "2022-01-25T18:41:10Z")
# 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 1. a Collection List element bound to the database with all your job listings (tutorial [here](https://www.youtube.com/watch?v=_hZChMW2RBc&list=PLvTqMLG5UNf4jo-Tu5-k5J7_MPGklqjit&index=2&ab_channel=WeWeb)) 2. items in your Collection List that are bound to data fields in your job listings database (tutorial [here](https://www.youtube.com/watch?v=XIPiJQkIXNk&list=PLvTqMLG5UNf4jo-Tu5-k5J7_MPGklqjit&index=3&ab_channel=WeWeb)) 3. a variable that you can call “search” 4. 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. ![Screen Shot 2022-01-25 at 19.07.38](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/4e48dcfac2c39ba14ab8db158cdb3eced97fe685.png) 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. ![Screen Shot 2022-01-25 at 19.04.50](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/66dad807fdf294dfba7320eb531cccc8d39a83df.png) ## Add a Workflow to Your Search Bar And add a workflow where: 1. “On change” – i.e. every change in input will trigger the workflow 2. the “search” variable is updated with the value from the input value in the search bar 3. we fetch the collection to update the display ![Screen Shot 2022-01-25 at 19.21.41](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/94af693091b315718805b0cbc7db55d9a40010ab.png) 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. ---
**Author:** ![Emilie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/emilie/32/1415_2.png) [@Emilie](https://community.weweb.io/u/Emilie)\ **Post date:** [October 11, 2022, 5:07pm UTC](https://community.weweb.io/t/tutorial-search-a-collection-list/196/2 "2022-10-11T17:07:31Z")
Hi, I’m beginner of weweb tool. I followed the tutorial, but it seems something wrong in my configuration. What I done : - Add Search Bar - Add variable called Search - Add collection linked to my data ( REST API) Result : My Collection list is ok ![Capture d’écran 2022-10-11 à 19.02.37](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/d98654f1379a67c7a5bfa00fec66923a2d716dc8.png) Search Bar : Bind the search Bar to the search variable is ok ![Capture d’écran 2022-10-11 à 19.04.18](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/167fc62661ce3ee00cddb9b578be3ab83769d15c.png) Add workflows too : ![Capture d’écran 2022-10-11 à 19.05.26](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/20d1c430a87f944cb2e26115f7dddfdcd7bacc63.png) I don’t know where I went wrong ☹ Do you have any idea ? Many thanks ---
**Author:** ![khairul](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@khairul](https://community.weweb.io/u/khairul)\ **Post date:** [October 11, 2022, 6:20pm UTC](https://community.weweb.io/t/tutorial-search-a-collection-list/196/4 "2022-10-11T18:20:38Z")
Hi and welcome @Emilie . I think you should take a look at this doc and video [🔦 Backend Search a REST API Collection](https://docs.weweb.io/backend-search-rest-api-collection/) . It would help your case ---
**Author:** ![mdodds](https://avatars.discourse-cdn.com/v4/letter/m/8e8cbc/32.png) [@mdodds](https://community.weweb.io/u/mdodds)\ **Post date:** [February 22, 2024, 4:30pm UTC](https://community.weweb.io/t/tutorial-search-a-collection-list/196/5 "2024-02-22T16:30:33Z")
I think this tutorial may be missing a final, very important step. Or at least I couldn’t get it to work without adding a filter to the collection that checks to see if the data in the collection is contained within the search variable you’ve created.