html select插件select2,bootstrap-select自定义option搜索过滤

select2,bootstrap-select插件提供了好用的select标签样式.两者都有多选,单选,过滤option.但默认的option过滤是对option text值的过滤.百度上基本找不到.看两者的官方文档才找,记录一下.
select2 对应文档: https://select2.org/searching
bootstrap-select 对应文档: https://silviomoreto.github.io/bootstrap-select/examples/#basic-examples

一.select2.过滤效果亲测ok

1.先看默认的

<select id="game" name="source" style="width:100%;">
        <option>龙珠</option>
        <option>宝莲灯</option>
        <option>奇迹</option>

</select>

<script src="/lib/util/sb-admin-2/vendor/respond2/js/select2.js"></script>

<script>
    $('#game').select2();
</script>

上面代码,点击select时会出现对option text具有过滤作用的搜索框,在框中输入”龙 就会过滤出,”龙珠”.

2.自定义过滤option.需求:select 搜索框中输入”zhu” option出现”龙珠,输入”baolian” 出现option “宝莲灯” .输入”宝莲” 出现”宝莲灯”option

    <select id="game" name="source" style="width:100%;">
        <option spell="longzhu">   龙珠  </option>
        <option spell="baoliandeng">宝莲灯</option>
        <option spell="qiji">       奇迹  </option>

    <script src="/lib/util/sb-admin-2/vendor/respond2/js/select2.js"></script>

    </select>

<script>
    $('#game').select2({
        // 设置属性matcher
         matcher: matchCustom
    });

    //matchCustom 是自定义的过滤函数,对每个option进行遍历,如果return null.那么对应的option就不会显示,如果return data ,对应option就会显示
    // params.term 是 在搜索过滤框中输入的文字

    function matchCustom(params, data) {
        // If there are no search terms, return all of the data
        if ($.trim(params.term) === '') {
          return data;
        }

        // Do not display the item if there is no 'text' property
        if (typeof data.text === 'undefined') {
          return null;
        }
        // `params.term` should be the term that is used for searching
        // `data.text` is the text that is displayed for the data object
        if (data.text.indexOf(params.term) > -1) {
          var modifiedData = $.extend({}, data, true);
          modifiedData.text += ' (matched)';

          // You can return modified objects from here
          // This includes matching the `children` how you want in nested data sets
          return modifiedData;
        }

        //判断是否有符合匹配条件的spell_name
        //data.element.index 是对应option的index值
        if (getSpell(params.term).hasOwnProperty(data.element.index)) {
            return data;
        }

        // Return `null` if the term should not be displayed
        return null;
    }

    //获取所有符合匹配的spell_name 的index 对象
    var matchString=null;
    var indexObj = null;
    //matchStr 需要模糊匹配的值
    // indexObj 是有 所有符合模糊匹配的option index 的对象 
    function getSpell(matchStr) {
        if (matchStr===matchString && matchString!=null) {
            return indexObj;
        }
        matchString = matchStr;
        indexObj = {};
        $('#registered_game option').each(function () {
            var match = '^\\S*' + matchStr + '\\S*$';
            var reg = new RegExp(match, 'i');
            var str = $(this).attr('name_spell');
            if (reg.test(str)) {
                var i = $(this).index();
                indexObj[i] = $(this).val();
            }
        });
        return indexObj;
    }

</script>

二.bootstrap-select 默认的对option text值的过滤不再演示,自定义过滤option只是给出代码,本人未亲测

1.官网实例代码 通过设置data-tokens的

//需要引入bootstrap-select 的js,可去github下载
<select class="selectpicker" data-live-search="true">
  <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option data-tokens="mustard">Burger, Shake and a Smile</option>
  <option data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

上面代码实现在select 筛选框中输入’ket’ 就会出现 “Hot Dog, Fries and a Soda” option, 但是输入”hot”,反而不会出现”Hot Dog, Fries and a Soda” option,如何同时对data-tokens 以及对应的option text过滤可参考文档测试试

三.设置select2 的选中的值

<select id="select" class="selectpicker" data-live-search="true">
  <option value="v1" data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
  <option value="v2" data-tokens="mustard">Burger, Shake and a Smile</option>
  <option value="v３"　data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>

设置选中值为v2

  $("#select").val('v2').trigger('change');