select2,bootstrap-select插件提供了好用的select标签样式.两者都有多选,单选,过滤option.但默认的option过滤是对option text值的过滤.百度上基本找不到.看两者的官方文档才找,记录一下.
select2 对应文档: https://select2.org/searching
bootstrap-select 对应文档: https://silviomoreto.github.io/bootstrap-select/examples/#basic-examples
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>
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过滤可参考文档测试试
<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="v3" data-tokens="frosting">Sugar, Spice and all things nice</option>
</select>
设置选中值为v2
$("#select").val('v2').trigger('change');