Tutorial | Add Data Search and Filtering Functionality

When you have a database collection with lots of content, site visitors need an easy way to find what they're looking for. You can add powerful search and filtering capabilities to your site, transforming static content displays into interactive, user-friendly experiences.

This tutorial demonstrates how to build:

• Real-time text search - Site visitors type in a search field and see results update instantly as they type.
• Dropdown filtering - Site visitors select from predefined categories using a dropdown menu populated with unique values from your collection.

You'll learn to query collections, handle user input, and create interfaces that enhance the user experience.

We'll use the following steps to query a database collection and dynamically display matching results:

1. Set up site elements.
2. Query and display all content on page load.
3. Add search and filter functionality.

Before you begin

You need to note the following points before starting to code:

• Create a collection on your site.

Step 1 | Add elements to your page

This step sets up the user interface elements needed for search and filtering functionality.

1. Add a repeater to your page. Set the repeater ID to articlesList.

   Inside the repeater, add:

   • An image element. Set the image ID to itemImage.
   • Two text elements. Set the text IDs to itemCountry and itemContent

2. Add an input field for searching. Set the input ID to inputTitle.

3. Add a dropdown element. Set the dropdown ID to inputContinent.

Step 2 | Query and display all content on page load

This step retrieves all items from your collection and prepares them for display. When the page loads, you'll display all the items before any filtering is applied.

To query a collection, you'll need to get the collection ID. The way you get the ID depends on the editor you're using:

Now that you have the collection ID, you can query your data:

1. Import the @wix/data module, which provides the query() method for retrieving collection data. Also, save the collection ID to the collectionName variable.

2. Define a function that runs the query using the ID you retrieved above. Set the repeater's data property to your collection results:

The query returns an array of items, where each item represents an item from your collection. Collection field IDs become object properties, so fields such as image, country, content appear as properties with the same names in each result object.

3. Use the onItemReady() event handler to map your collection field values to specific repeater elements. This event runs automatically for each new element in the repeater's .data array.

   The handler receives an $item selector, which selects specific instances of repeated elements. In this example, image, country, and content are field IDs from your database collection:

4. Define a function to query your collection and populate the dropdown with all unique, non-empty continent values. Add a default option labeled "All" with the value All. This option allows site visitors to view all items, unfiltered.

5. Call the initRepeater(), loadAllResults(), and initDropdown() functions in the $w.onReady() handler:

Step 3 | Filter the repeater

This step adds the interactive functionality that allows site visitors to search and filter the displayed content in real time.

1. Define a function called buildFilterAndPopulateRepeater(). It filters your repeater results by checking if the "country" field contains the input text. When a dropdown value is selected, this function filters the collection and updates the repeater. Also, set the repeater's data property to your collection results:

2. For filtering by input, add an event handler that listens for any input changes in the search field. To prevent triggering too many queries, use a short delay after each keystroke. This technique, called debouncing, improves both performance and user experience by ensuring the search only runs after the site visitor has stopped typing for a specified period:

3. For filtering by dropdown, add an event handler that listens for any changes in the dropdown.

Complete code

Here's the complete working code:

See also

• $item
• Data Items API