基于jQuery UI的多项选择下拉列表框组件 jQuery UI MultiSelect Widget

Filter Plugin

Filtering is available by including the jquery.multiselect.filter.js plugin and the jquery.multiselect.filter.css CSS file. Initialize filtering on any of your multiselects by calling multiselectfilter() on the widget.

$("select").multiselect().multiselectfilter();

Options:

Pass any of these as a configuration object when you initialize multiselectfilter():

• label

  The text to appear left of the input. Defaults to "Filter:"

• width

  The width of the input in pixels. Defaults to 100px in the style sheet, but you can override this for each instance.

• placeholder

  The HTML5 placeholder attribute value of the input. Only supported in webkit as of this writing. Defaults to "Enter keywords"

• autoReset

  A boolean value denoting whether or not to reset the search box & any filtered options when the widget closes. Defaults to false.

Events:

• filter

  A callback function that fires after filtering is complete. Accepts two arguments: the original event and an array of matches.

  To do something when no matches are found:

  $("select").multiselect().multiselectfilter({
      filter: function(event, matches){
          if( !matches.length ){
              // do something
          }
      }
  });
  

  To do something with a match:

  $("select").multiselect().multiselectfilter({
      filter: function(event, matches){
  		
          // find the first matching checkbox
          var first_match = $( matches[0] );
      }
  });
  

  You can also bind to the event after a multiselect has been initialized, like such:

  $("select").bind("multiselectfilterfilter", function(event, matches){
      // do something
  });
  

Methods

Syntax: $("select").multiselectfilter("method_name");

• updateCache

  Reloads the cache of values to search against. Make sure you call this after dynamically adding or removing any inputs to the multiselect.

• destroy

  Destroys the widget.

• widget

  Returns the wrapper div with the input and label text inside. This is a quick and easy way to access the HTML created by the plugin.