# 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.

## Install

* Add [`/dist/plugins/filter.js`](/dist/plugins/filter.js) to your application assets.
* Link to them in your code. See [examples](README.md#examples).

## Usage

Add the `droplabFilter` object to the plugins array of a `DropLab.prototype.addHook` call.

`droplabFilter` 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.

```html
<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>

<script>
  const droplab = new DropLab();

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

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

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

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.