jQuery MultiSelect

jQuery UI MultiSelect with 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(); // Show ALL if Check all

$("select").multiselect({ noneSelectedText: 'Select a Option', selectedList: 10 }).multiselectfilter();

$("select").multiselect({ noneSelectedText: 'Select a Option', selectedList: 10, checkAllText: '',  uncheckAllText: ''}).multiselectfilter(); // Hide Check all and Uncheck all

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.

• checkAllText

  Empty to hide 'Check all'. Defaults to "Check all:"

• uncheckAllText

  Empty to hide 'Uncheck all'. Defaults to "Uncheck all:"

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.

Demo jQuery UI MultiSelect Widget

jQuery UI MultiSelect Widget - Eric Hynds