Skip to content
  1. Extras
  2. mSearch2
  3. Generic solutions
  4. Dependent filters

Dependent filters

There is no dependent filter work in mFilter2, because all data are selected and shown at once. However, it can be imitated with help of a special javascript.

For example, you have 2 tv parameters: brand and model of a car, where model name includes brand name.

Filter output will be like this:

modx
[[!mFilter2?
  &parents=`0`
  &filters=`
    tv|marka,
    tv|model
  `
  &aliases=`
    tv|model==model,
    tv|marka==marka,
  `
  &suggestionsRadio=`
    tv|marka,
    tv|model
  `
  &tplFilter.outer.model=`tpl.mFilter2.filter.select`
  &tplFilter.row.model=`tpl.mFilter2.filter.option`
  &tplFilter.outer.marka=`tpl.mFilter2.filter.select`
  &tplFilter.row.marka=`tpl.mFilter2.filter.option`
]]

We need &suggestionsRadio for normal work of select filters.

Now we write script that will hide car models the name of which does not begin with the chosen brand:

js
var modelFilter = {
  // Our selectors
  options: {
    marka: '#mse2_tv\\|marka',
    model: '#mse2_tv\\|model',
  },
  // Initializing the function
  initialize: function() {
    $this = this;
    // We get the elements we need and save them as object properties
    this.marka = $(this.options['marka']);
    this.model = $(this.options['model']);

    // We look into parameters of the address line in search of the chosen brand
    var params = mSearch2.Hash.get();
    // If there is no such brand there - we turn off models
    if (params['marka'] == undefined) {
      $this.disableModel();
    }
    // If there is such brand there - we turn on models
    else {
      $this.enableModel();
    }

    // We add an operator for brand change
    this.marka.find('select').on('change', function() {
      // If something is selected, we turn on models
      if ($(this).val() != '') {
        // We switch model to the first point 'Select from the list'
        $this.model.find('option:first').attr('selected', true);
        // Then we activate block
        $this.enableModel();
      }
      // If nothing is selected, we turn off models
      else {
        $this.disableModel();
      }
    })
  },

  // Turning off models function
  disableModel: function() {
    // We look for all fields with an unempty value
    $this.model.find('option[value!=""]').attr('selected', false).attr('disabled', true);
    // Then we hide the whole block
    $this.model.hide();
  },

  // Turning on models function
  enableModel: function() {
    // We get the car brand
    var marka = this.marka.find(':selected').text().replace(/\(.*?\)$/, '').replace(/\s+$/, '');
    var re = new RegExp('^' + marka);
    // Then we go through all models and check their names
    $this.model.find('option').each(function() {
      var $this = $(this);
      // If the name does not fit, model should be turned off
      if (!$this.text().match(re) && $this.prop('value') != '') {
        $this.attr('disabled', true);
        $this.hide();
      }
      // If it does model should be turned on
      else {
        $this.attr('disabled', false);
        $this.show();
      }
    });
    // Then we show the whole block with models
    $this.model.show();
  },
}

// Script begins to work when the document is fully downloaded
$(document).ready(function() {
  // And if on the page there are filters
  if ($('#mse2_mfilter').length > 0) {
    modelFilter.initialize();
  }
});

This script is added to a page separately and does not anyhow prevent standard script mSearch2 from working normally.

That is what you should get as a result (you can click on the GIF):