Filter

原文:https://docs.gitlab.com/ee/development/fe_guide/droplab/plugins/filter.html

Filter

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

Usage

Filter对象添加到DropLab.prototype.initDropLab.prototype.addHook调用的插件数组中.

  • Filter需要template的配置值.
  • template应该是要与用户输入字符串进行比较以进行过滤的数据数组中对象的键.
  1. <input href="#" id="trigger" data-dropdown-trigger="#list">
  2. <ul id="list" data-dropdown data-dynamic>
  3. <li><a href="#" data-id="{{id}}">{{text}}</a></li>
  4. <ul>
  1. const droplab = new DropLab();
  2. const trigger = document.getElementById('trigger');
  3. const list = document.getElementById('list');
  4. droplab.init(trigger, list, [Filter], {
  5. Filter: {
  6. template: 'text',
  7. },
  8. });
  9. droplab.addData('trigger', [{
  10. id: 0,
  11. text: 'Jacob',
  12. }, {
  13. id: 1,
  14. text: 'Jeff',
  15. }]);

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

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