1. Select 2. Filtration effect test ok

1. Look at the default

<select id="game" name="source" style="width:100%;">
        <option>Dragon Ball</option>
        <option>Baolian Lamp</option>
        <option>Miracle</option>

</select>

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

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

In the above code, when you click select, there will be a search box that can filter option text. If you type "Dragon" in the box, you will filter out "Dragon Ball".

2. Custom filtering options. Requirements: select search box input "zhu" option appears "dragon bead", input "baolian" appears option "Baolian lantern", input "Baolian" appears "Baolian lantern" option"

    <select id="game" name="source" style="width:100%;">
        <option spell="longzhu">   Dragon Ball  </option>
        <option spell="baoliandeng">Baolian Lamp</option>
        <option spell="qiji">       Miracle  </option>

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

    </select>

<script>
    $('#game').select2({
        // Setting attribute matcher
         matcher: matchCustom
    });

    //matchCustom is a custom filter function that traverses each option. If return null. then the corresponding option will not be displayed. If return data, the corresponding option will be displayed.
    // params.term is the text entered in the search filter box

    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;
        }

        //Determine whether spell_name meets the matching criteria
        //data.element.index is the index value of the corresponding option
        if (getSpell(params.term).hasOwnProperty(data.element.index)) {
            return data;
        }

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

    //Get all index objects that match spell_name
    var matchString=null;
    var indexObj = null;
    //The matchStr needs the value of fuzzy matching
    // indexObj has all options index objects that match fuzzy matches 
    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>

2. bootstrap-select default filtering of option text value is no longer demonstrated. Custom filtering option only gives code, I did not personally test it.

1. Official Web Instance Code by Setting data-tokens's __________

//You need to introduce bootstrap-select js, which can be downloaded from 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>

The above code implements that if you type'ket'in the select filter box, you will see "Hot Dog, Fries and a Soda" option, but if you type "hot", you will not see "Hot Dog, Fries and a Soda" option. How to filter data-tokens and corresponding option text at the same time can be referred to in the document test.