jQuery Select-Filter

A jQuery plugin to dynamically filter long <select> lists through an input[type="text"] control.

This plugin is forked from a project by Andras Zoltan-Gyarfas.

Demo

See this jsFiddle.

Getting Started

Download the production version (jquery.select-filter.min.js) or development version (jquery.select-filter.js) of jQuery.Select-Filter and include it in your HTML.

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="jquery.select-filter.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('select.class').selectFilter();
    });
</script>

Examples

Simple Syntax

$('select.class').selectFilter();

You are able to use the select filter on more than one select element on a page. See the [jQuery selectors documentation](http://api.jquery.com/category/selectors/) for more information.

Verbose Syntax

Any of the following attributes can be inside an object passed to `selectFilter()`.  These options highlight jQuery.select-filter's default settings.

$('select.class').selectFilter({
    // Filtering should be case sensitive.
    'caseSensitive': false,

    // The filter box will be cleared when the user presses the Escape key.
    'clearInputOnEscape': true,

    // If true, disable any regex the user enters into the search box.
    'disableRegex': true,

    // The class to apply to the filter bar.
    'filterClass': 'filter-bar',

    // Whether the input element should be appended to the DOM 'below'
    // (default) or 'above' the select element
    'inputLocation': 'below',

    // The placeholder text for the filter bar.
    'inputPlaceholder': 'type to filter list',

    // The minimum number of characters at which to begin the filtering process.
    'minimumCharacters': 3,

    // The minimum size attribute (number of rows) for the element this plugin is called upon.
    // If the element is less than this size, its size will be updated accordingly.
    'minimumSelectElementSize': 3,

    // Amount of time to delay filtering (in ms) after a key is pressed.
    'searchDelay': 200,

    // Begin searching (strictly) from the beginning of each <option> of the calling element.
    'searchFromBeginning': false,

    // The width for the select element and its input filter box.
    // If -1, both the select element and its filter box have their size set to the width of
    // the select element before any filtering occurs.
    'width': -1
});

Release History

• 2013-01-14 -- 0.0.1 -- Initial verison.
• 2015-01-19 -- 0.0.2 -- Added 'inputLocation' option.

License

• GNU GPL

Authors

• Kevin Richardson