效果圖:

需要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();//不匹配的隱藏

        }

    });

});