593.md

# Filter

> 原文：[https://docs.gitlab.com/ee/development/fe_guide/droplab/plugins/filter.html](https://docs.gitlab.com/ee/development/fe_guide/droplab/plugins/filter.html)

*   [Usage](#usage)

# Filter[](#filter "Permalink")

`Filter`是一个插件，它允许使用简单的模糊字符串搜索输入值来过滤已添加到下拉列表中的数据.

## Usage[](#usage "Permalink")

将`Filter`对象添加到`DropLab.prototype.init`或`DropLab.prototype.addHook`调用的插件数组中.

*   `Filter`需要`template`的配置值.
*   `template`应该是要与用户输入字符串进行比较以进行过滤的数据数组中对象的键.

```
<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',
}]); 
```

上面，输入字符串将与传递的数据对象的`test`键进行比较.

您可以选择将`filterFunction`设置为一个函数. 将使用此函数代替`Filter`的内置字符串搜索. `filterFunction`传递了 2 个参数，第一个是数据对象之一，第二个是当前输入值.