MS - Issue #120

1.10

by Eric Hynds

HTML

<script src="http://github.com/ehynds/jquery-ui-multiselect-widget/raw/1.10/src/jquery.multiselect.js"></script>
<script src="https://raw.github.com/ehynds/jquery-ui-multiselect-widget/master/src/jquery.multiselect.filter.js"></script>
<link rel="stylesheet" href="http://erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.css">
<link rel="stylesheet" href="http://erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.filter.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css">
<form>
    <select name="test" style="width: 300px">
        <option>dsadsa</option>
        <option value="foo">foo</option>
        <option value="bar">bar</option>
        <option value="baz">baz</option>
    </select>
    
    <select name="test" style="width: 300px">
        <option value="foo">foo</option>
        <option value="bar">bar</option>
        <option value="baz">baz</option>
    </select>

        
    <select name="test" style="width: 300px" multiple>
        <option value="foo">foo</option>
        <option value="bar">bar</option>
        <option value="baz">baz</option>
    </select>
    
        
    <select name="test" style="width: 300px" multiple>
        <option></option>
        <option value="foo">foo</option>
        <option value="bar">bar</option>
        <option value="baz">baz</option>
    </select>
</form>

JavaScript

/*
 * jQuery MultiSelect UI Widget Filtering Plugin 1.2
 * Copyright (c) 2011 Eric Hynds
 *
 * http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
 *
 * Depends:
 *   - jQuery UI MultiSelect widget
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
*/
(function($){
    var rEscape = /[\-\[\]{}()*+?.,\\^$|#\s]/g;
    
    $.widget("ech.multiselectfilter", {
        
        options: {
            label: "Filter:",
            width: null, /* override default width set in css file (px). null will inherit */
            placeholder: "Enter keywords"
        },
        
        _create: function(){
            var self = this,
                opts = this.options,
                instance = (this.instance = $(this.element).data("multiselect")),
                
                // store header; add filter class so the close/check all/uncheck all links can be positioned correctly
                header = (this.header = instance.menu.find(".ui-multiselect-header").addClass("ui-multiselect-hasfilter")),
                
                // wrapper elem
                wrapper = (this.wrapper = $('<div class="ui-multiselect-filter">'+(opts.label.length ? opts.label : '')+'<input placeholder="'+opts.placeholder+'" type="search"' + (/\d/.test(opts.width) ? 'style="width:'+opts.width+'px"' : '') + ' /></div>').prependTo( this.header ));

            // reference to the actual inputs
            this.inputs = instance.menu.find('input[type="checkbox"], input[type="radio"]');
            
            // build the input box
            this.input = wrapper
            .find("input")
            .bind({
                keydown: function( e ){
                    // prevent the enter key from submitting the form / closing the widget
                    if( e.which === 13 ){
                        e.preventDefault();
                    }
                },
              ...