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

效果图:

需要Bootstrap基础文件+jq

Html:

<div class="form-group">

    <label class="col-sm-4 control-label"><span

            style="color:red;">*</span>应用系统:</label>

    <div class="col-sm-6">

        <select name="userSystem" id="showUserSystem" multiple="multiple"></select>

    </div>

</div>

Css:

<link rel="stylesheet" type="text/css"

      href="/jquery-multi-select/css/multi-select.css"/>

Js:

<script type="text/javascript"

        src="/jquery-multi-select/js/jquery.multi-select.js"></script>

var mutiSelect = {

    selectableHeader: '<input class="search-input se-con form-control" type="text" placeholder="系统搜索" >',//搜索框

    selectionHeader: '<input class="col-sm-12 se-con form-control" type="text" disabled placeholder="已选系统">', //提示框

    selectableaddUserSystem: true,

    afterSelect: function (values) {
          //

    },

    afterDeselect: function (values) {

          //

    }

}



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

    $("#addUserSystem").append("<option value='" + data[i].systemCode + "'>" + data[i].systemName + "</option>");

}
//配置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