Dynamic Conditional Filtering of a Repeater

ATTENTION: THIS IS OUR OLD SITE. TO SEE OUR NEW WEBSITE, CLICK HERE.

It is often helpful to break up large lists into conditional lists when requiring users to choose from options in a dropdown menu. Learn how to dynamically filter a repeater first by a high level category (such as region) and then by a low level category (such as town or location) underlying the high level category already chosen.

This example assumes you are already familiar with adding repeaters to a page. The screenshot below shows a conditional dropdown for filtering a repeater on news articles by region and sub-region (where sub-region is conditioned on region). The region dropdown is enabled on page load while the sub-region is disabled on page load. Once the region dropdown has been selected (e.g. Canterbury in the screenshot), then other options in the sub-region are made available. The options for each dropdown will be defined using code. Give each dropdown input an alias (iptRegion and iptLocation in this example). Add an onChange event listener to each button.

The code below populates the dropdown inputs iptRegion and iptLocation respectively. In this example, the region and location options are sourced from the same dataset as the repeater i.e. an Articles collection. This choice means that only region and location options which exist in the repeater are presented to the user for filtering e.g. you cannot filter on Canterbury region if there are no articles on Canterbury. To populate the dropdown filters with all region and location options - this should be changed to a collection with all options as indicated in the screenshot below. See 'Conditional Dropdown Input Fields' section for more information on this collection. The code allows a default "All Regions"and "Any Location" to be specified when no region or location is selected. For our purposes: 'Other or Not Specific' and 'Not Applicable' are removed from the dropdown filter options because they are equivalent to the "All Regions" and "Any Location" default option. Additionally, the location options are filtered by the Region selected.

function uniqueRegion(){
  wixData.query('Articles')
  .ne('region','Not Applicable')
  .limit(1000)
  .find()
  .then(results => {
    var uniqueTitles = getUniqueTitles(results.items);
    $w("#iptRegion").options = buildOptions(uniqueTitles);
  });

  function getUniqueTitles(items) {
    const titlesOnly = items.map(item => item.region);
    titlesOnly.sort();
    return[...new Set(titlesOnly)];
  }

  function buildOptions(uniqueList) {
    var uniqueListFinal = uniqueList.map(curr => { return {label:curr, value:curr }; }); 
    uniqueListFinal.unshift({"label": 'Any Region', "value": ''});
    return uniqueListFinal;
  }

}


function uniqueLocation(){
  wixData.query('Articles')
  .eq('region', $w('#iptRegion').value)
  .ne('location','Other or Not Specific')
  .ne('location','Not Applicable')
  .limit(1000)
  .find()
  .then(results => {
    const uniqueTitles = getUniqueTitles(results.items);
    $w("#iptLocation").options = buildOptions(uniqueTitles);
  });

  function getUniqueTitles(items) {
    const titlesOnly = items.map(item => item.location);
    titlesOnly.sort();
    return[...new Set(titlesOnly)];
  }

  function buildOptions(uniqueList) {
    var uniqueListFinal = uniqueList.map(curr => { return {label:curr, value:curr }; }); 
    uniqueListFinal.unshift({"label": 'Any Location', "value": ''});
    return uniqueListFinal;
  }

}

The code below sends the dropdown option chosen to the filtering function whenever the dropdown options are changed by the user. Additionally, the iptRegion_change event resets iptLocation dropdown, enables and populates it every time it is changed. This is to ensure that if the region is changed, the iptLocation dropdown cannot remain selected on locations which don't correspond to the new region chosen.

export function iptRegion_change(event) {

	lastLocation = '';
	uniqueLocation();
	$w("#iptLocation").enable();
	
	filterResults($w('#iptRegion').value, lastLocation);

}


export function iptLocation_change(event) {

	filterResults(lastRegion, $w('#iptLocation').value);

}

Next we create a filter function to do the filtering of the dataset for the repeater by region or location (the arguments passed to the function). The first thing the function does is to check if a new filter activity is required by comparing the latest arguments to the previous arguments received. If any of the arguments have changed, then a new filter activity is performed.

Each parameter is checked in turn, with newFilter updated with any changes. The region and location fields of #dbArticles are checked to see if they equal the region and location being searched for.

function filterResults(region_s, location_s)
{
	if(lastRegion !== region_s || lastLocation !== location_s)
	{
		let newFilter = wixData.filter();

		if(region_s)
			newFilter = newFilter.eq('region',region_s);
    
		if(location_s)
			newFilter = newFilter.eq('location',location_s);
		
		$w('#dbArticles').setFilter(newFilter);

		lastRegion = region_s;
		lastLocation = location_s;

	}
	
}

Finally, we declare the global variables for saving the last filtered region and location, and populate the region dropdown with options when the page loads.

import wixData from 'wix-data';

let lastRegion;
let lastLocation;

$w.onReady( () => { 

	uniqueRegion();

});

Unlock

Please login or sign-up (it's free!) to view our code. Refresh the page if already logged in.

Disclaimer: To the best of our knowledge, this code works for its stipulated purpose. If you find an error in our code, or know of a better way to achieve the same result - please contact us! We will help where we can, however please be aware that the code is provided 'as is' and without a promise of support in using or implementing it.

Browse More Code

VeloCodeBank

take your Wix website to the next level

<Welcome>

Dynamic Conditional Filtering of a Repeater

ATTENTION: THIS IS OUR OLD SITE. TO SEE OUR NEW WEBSITE, CLICK HERE.

Finally, we declare the global variables for saving the last filtered region and location, and populate the region dropdown with options when the page loads.

Please login or sign-up (it's free!) to view our code. Refresh the page if already logged in.

Contact Us

© VeloCodeBank