- Updated in v2.19.0 to properly escape regexp characters. See issue #796 for details.
- Updated in v2.16.3 to allow adding an initial value to the select2 plugin.
- This is a demo of the select2 filter formatter code.
- It requires jQuery 1.7.2+, tablesorter 2.16+, the filter widget 2.16+ and Select2 v3.4.6+ (not tested on older select2 versions)
- This demo uses the new filter_selectSourceoption which is only available in tablesorter v2.16+
 
		
		
			There are only two filter formatter options, the rest are all 
select2 plugin options (defaults shown below):
			
				
					| Option | Default | Description | 
|---|
				
				
					| Select2 FilterFormatter options | 
|---|
				
				
					
						| cellText | '' | Text added within a <label>before the input. | 
					
						| match | true | Adds a "filter-match" class name to the header & modifies the search | 
					
						| value | [ ] | Set the initial select2 values within this array. These values are restored when the filters are reset. | 
				
				
					| Select2 plugin (modified defaults) | 
|---|
				
				
					
						| multiple | true | Allow multiple selections. This option can be modified. | 
					
						| width | '100%' | Reduce this width if you add anything cellText, or the text and the input will be on separate lines. | 
				
			
			This is an example of how to set these options:
			
filter_formatter : {
  // default settings on first column
  0 : function($cell, indx) {
    return $.tablesorter.filterFormatter.select2( $cell, indx, {
      // *** select2 filter formatter options ***
      cellText : '',    // Text (wrapped in a label element)
      match    : true,  // adds "filter-match" to header & modifies search
      value    : [],    // initial select2 values
      // *** ANY select2 options can be included below ***
      // (showing default settings for this formatter code)
      multiple : true,  // allow multiple selections
      width    : '100%' // reduce this width if you add cellText
    });
  }
}
		 
	
	Demo
	
		
			
			| AlphaNumeric (match) | AlphaNumeric (exact; only available) | Numeric | Animals | Sites | 
	
	
		| abc 123 | abc 123 | 10 | Koala | http://www.google.com | 
		| abc 1 | abc 1 | 34 | Ox | http://www.yahoo.com | 
		| abc 9 | abc 9 | 10 | Girafee | http://www.facebook.com | 
		| zyx 24 | zyx 24 | 67 | Bison | http://www.whitehouse.gov/ | 
		| abc 11 | abc 11 | 3 | Chimp | http://www.ucla.edu/ | 
		| def 2 | def 2 | 56 | Elephant | http://www.wikipedia.org/ | 
		| abc 9 | abc 9 | 75 | Lion | http://www.nytimes.com/ | 
		| def 10 | def 10 | 87 | Zebra | http://www.google.com | 
		| zyx 1 | zyx 1 | 99 | Koala | http://www.mit.edu/ | 
		| zyx 12 | zyx 12 | 0 | Llama | http://www.nasa.gov/ | 
	
 
	Header
	
		<!-- jQuery -->
<script src="js/jquery-latest.min.js"></script>
<!-- Tablesorter: required -->
<link href="../css/theme.blue.css" rel="stylesheet">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
<!-- Select2 code -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.min.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.6/select2.min.js"></script>
<script src="../js/widgets/widget-filter-formatter-select2.js"></script>
	 
	HTML
	
	Javascript