in Uncategorized

Custom Select for Twitter Bootstrap 3

If you are using Twitter Bootstrap 3 and would like to customise a select input field or have typeahead functionality, this jQuery plugin is just for you. There is also a similar plugin for Bootstrap 2.

It allows you to turn a default select input field into an element completely matching the style of Twitter Bootstrap with one line of JavaScript therefore saving a lot of your time.

The plugin is simple to use, for example:

<script>
    $(document).ready(function(){
        $('.some_classname').bootstrapSelect();
    });
</script>

Features

  • applies Twitter Bootstrap 3 style to a select input field,
  • preserves native select input field behavior (you can use GET or POST methods to submit the selected value),
  • easily styleable,
  • by default uses Twitter Bootstrap 3 button styling and field sizing classnames, but this can be easily overridden by using custom ones,
  • opens above the field if there is not enough space below it,
  • supports keyboard navigation (up/down/enter/tab keys),
  • supports quick navigation through the options by first character,
  • supports change event,
  • provides methods for easy enabling/disabling the entire select or single option,
  • provides methods for dynamically getting/setting a value,
  • provides methods for dynamically adding/removing options,
  • can be customised to filter out options on user input (typeahead/autocomplete-like functionality),
  • can be customised to show a scrollbar when there are many options.

Customisation

In a nutshell, you can:

  • customise button style with any of Bootstrap 3 button classnames, e.g. `btn-info`, `btn-success`, etc.
  • customise field size with any of Bootstrap 3 input field size classnames, e.g. `input-lg`, `input-sm`,
  • supply custom classname to namespace the whole element and style it as preferred,
  • set a minimum number of options which triggers a scrollbar to appear,
  • allow filtering options on user input (2 filter types: begins/contains; optional case-sensitivity; number of characters to input before filter is triggered),
  • enable and disable an entire select box and check if it is disabled using plugin methods,
  • enable and disable any option and check if it is disabled using plugin methods,
  • dynamically add new options at a preferred position using plugin method or remove options from preferred position,
  • get and set values with JavaScript and listen to the change event.

Full documentation comes with a download package. Documentation includes explanation of all available customisation options, methods and their parameters.
It also contains ‘How to’ section and a set of fully working examples, demonstrating every feature.

Download

Custom Select for Twitter Bootstrap jQuery plugin is available to purchase from CodeCanyon

What other people say?