Front-end plugin 1: jQuery Multi-Select multi-selection plugin (supports fuzzy query)

Recently, the project needs to pull down the multi-select box. I found a plug-in on Baidu, adjusted it myself, and now share it with everyone, so that everyone can learn together.

<html>
    <head>
        <link href='../multi-select.css' rel='stylesheet'>
    </head>
    <body>       <input class="inputxt" name="ycmn" value="" style="width: 500px;">
       <select id="optgroup" multiple="multiple">
        
        <c:forEach items="${site}" var="site">
	  <option value="${site.mnNumber}">${site.mnNumber}</option>
	</c:forEach>
    </select>
        <script src='../jquery-1.11.2.min.js' type='text/javascript'></script>
        <script src='../jquery.multi-select.js' type='text/javascript'></script>
    </body>
</html>

The plugin resources CSS and js can be downloaded at http://loudev.com/

Below is the JavaScript

<script type="text/javascript">
  $(document).ready(function() {       		 
     // 初始化
        $('#optgroup').multiSelect({
            selectableHeader: '<i class="fa fa-search pull-right p-r-sm" style="position:relative;top:9px;z-index:1;"></i><input class="search-input col-sm-12 border text-size-sm p-r-xl" type="text" placeholder="选择设备" style="border-bottom:0;border-radius:3px 3px 0 0;padding-top:3px;padding-bottom:3px;margin-top:-13px;;width:160px;">',
            selectionHeader: '<input class="col-sm-12 border bg-white text-size-sm" type="text" disabled placeholder="已选设备" style="border-bottom:0;border-radius:3px 3px 0 0;padding-top:3px;padding-bottom:3px;width:160px;">',
            selectableOptgroup: true,
  	  
						            afterSelect: function (values) {
	               // select.modifyselectNum('#optgroup');
 var sel = $("#optgroup").val();
                 //alert(sel);
                 document.getElementById("ycmn").value = sel;
            },
            afterDeselect: function (values) {
               // select.modifyselectNum('#optgroup');
                var sel = $("#optgroup").val();
                //alert(sel);
                document.getElementById("ycmn").value = sel;
            }
        });        // 可选全选按钮  暂时没用到
        $('button.selectAll').click(function(){
            $('#optgroup').multiSelect('select_all');
	            														
		

				            return false;
 	        });         // The Select All button is not used for now
         $('button.deselectAll').click(function(){
             $('#optgroup').multiSelect('deselect_all');
             return false;
         });         // Search box live query
         $('input.search-input').on('input propertychange', function() {
             var inputValue = $(this).val().trim();
             var $selections = $('#optgroup').siblings('.ms-container').find('.ms-selectable li.ms-elem-selectable');
             $selections.each(function () {
                 var thisValue = $( this).children('span').text();
                 if (thisValue.
match(inputValue)) {
                    $(this).show();


					

									                } else {
	                    $(this).hide();
	                }
	            });
	        });         //默认值
            var mn = '${mn}';
       // alert("mn-------"+mn);
        if(mn != null){
var array = mn.split(",");
$('#optgroup').multiSelect('select',array);
        }
  });
        </script>

Next is the Controller

@RequestMapping(params = "addorupdate")
	public ModelAndView addorupdate(TSUser user, HttpServletRequest req) {

        ModelAndView model = new ModelAndView("system/user/user");
String sql = "from TSSiteEntity ";		          
	
        List<TSSiteEntity> list = this.systemService.findByQueryString(sql);
		
        model.addObject("site",list);
        
	String mn = user.getYcmn();
        model.addObject("mn",mn);

        return model;
       
	}

A final rendering

For more methods and examples, please refer to http://loudev.com/

Front-end plugin 1: jQuery Multi-Select multi-selection plugin (supports fuzzy query)

Guess you like