jquery穿梭框查找功能

jQuery穿梭框是一个非常常用的UI组件，可以实现两个列表间的数据交互。在使用过程中，查找功能也是非常重要的一个功能，可以帮助用户更加方便地找到需要的内容。

  // 初始化穿梭框
  $('#select').transfer({
    data: data,formatItem: function (item) {
      return item.text;
    },// 开启查找功能
    filterable: true,// 设置查找的字段
    filterValues: ['text']
  });

在上面的代码中，我们使用了transfer()方法来初始化穿梭框，其中data是传入的数据，formatItem是对数据进行格式化的方法。下面是查找功能的具体实现，我们设置filterable为true，开启查找功能，并设置filterValues为['text']，表示只在text字段中查找。

  // 查找功能
  $('#filter').on('keyup',function () {
    var val = $.trim($(this).val());
    $('#select').find('.transfer-data-item').each(function () {
      var $item = $(this);
      var text = $item.data('transferItem').text;
      if (text.indexOf(val) > -1) {
        $item.show();
      } else {
        $item.hide();
      }
    });
  });

在上面的代码中，我们使用了一个文本框和一个keyup事件，当文本框中的值改变时，触发keyup事件，然后遍历每一个数据项，判断是否包含文本框中的值，如果包含就显示，否则就隐藏。

以上就是关于jquery穿梭框查找功能的介绍，希望对大家有所帮助。