Skip to content

Converts a select box into a searchable and keyboard friendly interface. Fallbacks to native select on mobile and ipad devices.

Notifications You must be signed in to change notification settings

PebbleRoad/combo-select

Repository files navigation

Combo Select

Converts a select box into a searchable and keyboard friendly interface. Fallbacks to native select on mobile and ipad devices.

  • Search and filter select items
  • Mobile and Tablet friendly (fallbacks to native select)
  • Keyboard accessible
  • Easily to style
  • Data attribute support
  • Support both numeric and string data types in select
  • Supports implict style attributes

Browser support

  • Safari, Chrome, Firefox, Opera
  • iOS, Android, IE Mobile
  • Internet Explorer IE 8 and above

How to use

	<select data-theme="bootstrap">
		<option value="">Select value</option>
		<option>1</option>
		<option>2</option>
	</select>
	/* Any data-* options can be added */

    $('select').comboSelect({
        comboClass         : 'combo-select', /* outer container class */
		comboArrowClass    : 'combo-select-arrow', /* arrow class */
		comboDropDownClass : 'combo-drop-down', /* dropdown class */
		inputClass         : 'combobox-input text-input', /* Input element class */
		disabledClass      : 'option-disabled', /* Disabled class */
		hoverClass         : 'option-hover', /* dropdown list hover class */
		selectedClass      : 'option-selected', /* dropdown list selected class */
		markerClass        : 'combo-marker', /* Search marker class */
		maxHeight          : 200, /* Max height of dropdown */
		themeClass         : '', /* Theme using external classes */
		extendStyle		   : true /* Copy all inline styles from original select */
    })

Markup after conversion

	<div class="combo-select">
		<select name="month" tabindex="-1">
		</select>
		<div class="combo-select-arrow"></div>
		<ul class="combo-drop-down">
			<li>....</li>
		</ul>
		<input type="text" placeholder="Select Month" class="combobox-input text-input">
	</div>

Todo

  • Support multiple and size attributes in select
  • Optgroup and disabled option support - Done
  • API to destroy/update - Done
  • Unit tests

About

Converts a select box into a searchable and keyboard friendly interface. Fallbacks to native select on mobile and ipad devices.

Resources

Stars

Watchers

Forks

Packages

No packages published