multi-select 插件简单使用(带搜索框)

效果图:

 

需要Bootstrap基础文件+jq

 

Html:

    *应用系统:

    


        

    

Css:

Js:

var mutiSelect = {

    selectableHeader: '',//搜索框

    selectionHeader: '', //提示框

    selectableaddUserSystem: true,

    afterSelect: function (values) {
          //

    },

    afterDeselect: function (values) {

          //

    }

}



配置先配置select里面的option: for (var i = 0; i < data.length; i++) {

    $("#addUserSystem").append("" + data[i].systemName + "");

}
//配置muti-select:
$('#addUserSystem').multiSelect(mutiSelect);
//配置搜索
$('input.search-input').on('input propertychange', function () {

    var inputValue = $(this).val().trim();//获取搜索框内容

    var $selections = $('#addUserSystem').siblings('.ms-container').find('.ms-selectable li.ms-elem-selectable'); //获取选择框数据

    

    $selections.each(function () { //循环

        var thisValue = $(this).children('span').text();//取值

        if (thisValue.match(inputValue)) {//判断是否匹配

            if (!$(this).hasClass("ms-selected")) {//判断是否是已选中的数据 选中过的不显示

                $(this).show();

            }

        } else {

            $(this).hide();//不匹配的隐藏

        }

    });

});

插件官文文档地址:http://loudev.com/#usage