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