Searchable & Accessible Select Box Replacement Plugin - Combo Select

File Size: 11.7 KB
Views Total: 2492
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Searchable & Accessible Select Box Replacement Plugin - Combo Select

Combo Select is a jQuery select box replacement plugin which helps you create filterable, keyboard accessible, fully styleable select dropdowns with a fallback to native select on mobile devices.

How to use it:

1. Load the required combo.select.css in the header for default styles.

<link rel="stylesheet" href="combo.select.css">

2. Load jQuery and the jQuery combo select plugin's script at the end of the document so the page loads faster.

<script src="jquery.min.js"></script>
<script src="jquery.combo.select.js"></script>

3. Call the function on your existing select elements and done.

$('select').comboSelect()

4. Options with defaults.

$('select').comboSelect({

  // CSS selectors to help you style the select box
  comboClass         : 'combo-select',
  comboArrowClass    : 'combo-arrow',
  comboDropDownClass : 'combo-dropdown',
  inputClass         : 'combo-input text-input',
  disabledClass      : 'option-disabled',
  hoverClass         : 'option-hover',
  selectedClass      : 'option-selected',
  markerClass        : 'combo-marker',

  // Theme using external classes
  themeClass         : '',

  // max height of the select box
  maxHeight          : 200,

  // Copy all inline styles from original select
  extendStyle        : true,
  focusInput         : true
  
})

This awesome jQuery plugin is developed by PebbleRoad. For more Advanced Usages, please check the demo page or visit the official website.