Checkbox Dropdown

Content

Search a site using multiple filters.

Play with the example below to see what you can do:

Open this example as a template so you can see how everything works in the Editor. 

What We Built

In this example, we simulated a multi-select dropdown menu with checkboxes that lets visitors search site content using more than one filter option at a time. Users select multiple continents and all matching countries are displayed on the page.

How We Built It

We used our Search a Database example site as the basis for this example.

​​

Page Elements

The Search a Database example includes a repeater, dataset, and dropdown filter. In this example, in order to create our customized dropdown, we replaced the dropdown element with the following page elements:

  • A container box with a down arrow image that looks like a dropdown.

  • A text element inside the container box. The default text defined in the Editor is "Filter search by Continents."

  • A repeater for the part that "drops down". Each repeater item contains a checkbox and text for the name of a continent. This is where the user makes multiple selections.

 

Code

We added code to do the following:

  • Load the continents from the Continents collection into the multi-select repeater.

  • Expand or collapse the multi-select repeater when the container box is clicked.

  • If a checkbox in the repeater changes value, create an object containing all the checked continents.

  • Use the object to filter page content to display only countries located in the selected continents, as defined in the Articles collection. Page content is also filtered according to the search bar (see the Search a Database example).

  • Change the text in the container box to state the number of continents selected by the visitor.

Next Steps

  1. Open this example in the Editor to work with the template.

  2. Publish the site.

  3. Learn how to work with examples in Corvid.

Example Code

arrow&v

Example Demonstrates

wix-data.filter

Input Elements

To start using Corvid:  Go to the Wix Editor > Dev Mode > Turn on Dev Mode