/bootstrap-list-picker

Extends HTML's native multiple-select input to provide additional functionality

Primary LanguageJavaScriptMIT LicenseMIT

Bootstrap list picker

Extends HTML's native multiple-select input to provide additional functionality. Introduces a ListPicker class that operates behind the scenes to handle multiple-select inputs by listening on their events.

Bootstrap list picker works better when used with Bootstrap input clear button from Ehsan Mahpour.

Demo

A live demo can be found here.

Installation
  • Download the lastest version here and unzip.
  • Include css/bootstrap-listpicker.css after the main bootstrap css files.
  • Include js/bootstrap.input-clear.js and js/bootstrap-listpicker.js after the main bootstrap js files.
HTML Code Example

This example can also be seen in action in index.html:

    <!-- Core CSS -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css" />
        
    <!-- Plugins CSS -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap-listpicker.min.css"/>
        
    <!-- Core SCRIPTS -->
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
        
    <!-- Plugins SCRIPTS -->
    <script type="text/javascript" src="js/jquery.input-clear.js"></script>
    <script type="text/javascript" src="js/bootstrap-listpicker.min.js"></script>

    <!-- Custom SCRIPTS -->
    <script type="text/javascript">
        $(document).ready(function() {
            $('select[multiple="multiple"]').listpicker();
        });
    </script>

    <form method="post">
        <select multiple="multiple" name="data[model][field][]">
            <option data-tabs="A" value="1">option 1</option>
            <option data-tabs="B" value="2" disabled="disabled">option 2</option>
            <option data-tabs="C" value="3">option 3</option>
            <option data-tabs="A,C" value="4">option 4</option>
            <option value="5" selected="selected">option 5</option>
        </select>
    </form>
Configuration Options
sort

Define if the picker source list have to be sorted or not at anytime.

$(document).ready(function() {
    $(".myList").listpicker({
        sort: false  // Default.
    });
});
delay

Define the delay (in ms) between the last keyup event and the search action.

$(document).ready(function() {
    $(".myList").listpicker({
        delay: 700  // Default.
    });
});
References
License

MIT license - http://www.opensource.org/licenses/mit-license.php