Skip to content

Help

Reminder to all repository users: Please do not add , commit and push any data files to your remote git repositories. The disk space the Git server is limited, it wasn't dimensioned to host anything else than code. Solely your code files need versioning. The data inputs/outputs don't. A good idea is to do "git add" individually on each file you want to commit, to avoid versioning unwanted content.

Filter

Filter is a plugin that allows for filtering data that has been added to the dropdown using a simple fuzzy string search of an input value.

Usage

Add the Filter object to the plugins array of a DropLab.prototype.init or DropLab.prototype.addHook call.

  • Filter requires a config value for template.
  • template should be the key of the objects within your data array that you want to compare to the user input string, for filtering.
<input href="#" id="trigger" data-dropdown-trigger="#list">
<ul id="list" data-dropdown data-dynamic>
  <li><a href="#" data-id="{{id}}">{{text}}</a></li>
<ul>
  const droplab = new DropLab();

  const trigger = document.getElementById('trigger');
  const list = document.getElementById('list');

  droplab.init(trigger, list, [Filter], {
    Filter: {
      template: 'text',
    },
  });

  droplab.addData('trigger', [{
    id: 0,
    text: 'Jacob',
  }, {
    id: 1,
    text: 'Jeff',
  }]);

Above, the input string will be compared against the test key of the passed data objects.

Optionally you can set filterFunction to a function. This function will be used instead of Filter's built in string search. filterFunction is passed 2 arguments, the first is one of the data objects, the second is the current input value.