ikSelect 1.1.0

ikSelect helps you stylize selects.

Not convinced? Check the Features list or the Examples page!

Features

works in all popular browsers including IE6+
custom syntax support
works perfect as an inline-block
no z-index bugs in IE
optgroups support
great API
add/remove <option>'s and <optgroup>'s
disable/enable anything (select, optgoup, option)
optional filter text field
can be used with hidden parents
compatible with mobile devices
behavior is as authentic as possible
callbacks and event triggers

automatic calculations
- dropdown position, so it's always visible when opened
- needed width for the select or it's dropdown (can be disabled)
- active option appears in the center of the opened dropdown
keyboard support
- search by letters/numbers/etc
- navigation
- tab and shift+tab
fast and easy to use
built with attention to details
according to the poll, 100% of people love it*
*of all the five friends I asked

Installation

Include jQuery if it's still not included. The easiest way is to use some public CDN.
```
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
```
Download latest ikSelect script from here
Include ikSelect script after jQuery
```
<script src="ikSelect.min.js"></script>
```
Initialize the script somewhere. Better do it after the DOM is ready.
```
$(function () {
	$('select').ikSelect();
});
```

Add some CSS

.ik_select {
	/*
	Wraps all the plugin's HTML code.
	Probably you should not add any styles here
	*/
}
	.ik_select_link {
		/* Fake select you click on to open the dropdown */
	}
	.ik_select_link_focus {
		/* Focused state of the fake select */
	}
	.ik_select_link_disabled {
		/* Disabled state of the fake select */
	}
		.ik_select_link_text {
			/*
			Wrapper for the text inside the link.
			It's best to add some width limiting rules here like
			display:block;
			overflow:hidden;
			white-space:nowrap;
			text-overflow:ellipsis;
			*/
		}

	.ik_select_dropdown {
		/*
		Dropdown wrapper. Needed for script calculations.
		You should not add any visual styles here.
		You can shift the position of the dropdown
		by changing top and left values like
		top: -2px;
		left: -5px;
		*/
	}
		.ik_select_list {
			/*
			Wrapper for the options list.
			Now that's a good place to add visual styles.
			*/
		}
			.ik_select_optgroup {
				/* Optgroup */
			}
				.ik_select_optgroup_label {
					/* Optgroup label */
				}
				.ik_select_option {
					/* Option */
				}
					.ik_select_option_label {
						/* Option label */
					}
				.ik_select_hover {
					/* The hovered state of an option */
				}
				.ik_select_active {
					/* The active state of an option */
				}

		.ik_select_filter_wrap {
			/* Wrapper for the filter input */
		}
		.ik_select_filter {
			/* Filter input */
		}
		.ik_nothing_found {
			/* Block that's shown when there's nothing found. */
		}

Options

All the options can be set using HTML5 data- attributes or as an object passed to the plugin. For the data- attibutes use lowercased options! (data-autowidth="true", data-customclass="someclass", etc)

syntax: '<div class="ik_select_link"><span class="ik_select_link_text"></span></div><div class="ik_select_dropdown"><div class="ik_select_list"></div></div>'
	/*
	Custom syntax for the fake select.
	The only condition is that "ik_select_link_text" should be inside of "ik_select_link" and
	"ik_select_list" should be inside of "ik_select_dropdown".
	*/

autoWidth: true,
	/* Set width of the select according to the longest option. */

ddFullWidth: true,
	/* Set width of the dropdown according to the longest option. */

equalWidths: true,
	/* Add dropdown's scrollbar width to the fake select's width. */

dynamicWidth: false,
	/* Adjust fake select's width according to its contents. */

extractLink: false,
	/* Tells if fake select should be moved to body when clicked along with the dropdown */

customClass: '',
	/* Add custom class to the fake select's wrapper. */

linkCustomClass: '',
	/*
	Add custom class to the fake select.
	Uses customClass with '-link' appended if only the former presents.
	*/

ddCustomClass: '',
	/*
	Add custom class to the fake select's dropdown.
	Uses customClass with '-dd' appended if only the former presents.
	*/

ddMaxHeight: 200,
	/* Maximum allowed height for dropdown. */

extraWidth: 0,
	/*
	Adds extra pixels to the overall size of the fake select.
	Useful to overcome WebKit's font rendering bugs by adding 1 pixel to the width.
	*/

isDisabled: false,
	/*
	Set the initial state of the select.
	Overrides the *disabled* attribute.
	*/

filter: false,
	/* Appends filter text input. */

nothingFoundText: 'Nothing found'
	/* The text to show when filter is on and nothing is found. */

Callbacks and events

After each callback there's also an event emitted. Just replace on with ik and use lowercase. (ikshow, ikkeydown, etc)

onInit: function (inst) {}
	/* Called just after plugin is initialized. */

onShow: function (inst) {}
	/* Called just after dropdown was showed. */

onHide: function (inst) {}
	/* Called just after dropdown was hidden. */

onKeyDown: function (inst) {}
	/* Called when a key on a keyboard is pressed. */

onKeyUp: function (inst) {}
	/* Called when a key on a keyboard is released. */

onHoverMove: function (inst) {}
	/* Called when some other option is hovered. */

API

$.ikSelect.extendDefaults(settings);
	/* Override defaults for new instances. */

$(selector).ikSelect('reset');
	/* Recreates fake select from scratch. */

$(selector).ikSelect('redraw');
	/*
	Recalculates dimensions for the dropdown.
	Use this if select's parent was hidden when ikSelect was applied to it
	right after *show()*, *fadeIn()* or whatever you are using there.
	*/

$(selector).ikSelect('addOptions', optionObject[, optionIndex, optgroupIndex]);
$(selector).ikSelect('addOptions', optionObjectsArray[, optionIndex, optgroupIndex]);
	/*
	Add one or many options.
	By default appends to the dropdown's root.
	Optionally, tell at what index the option should appear.
	Optionally, tell to optgroup at what index to add the option.
	optionIndex is relative to optgroupIndex when the latter presents.
	*/

$(selector).ikSelect('addOptgroups', optgroupObject[, optgroupIndex]);
$(selector).ikSelect('addOptgroups', optgroupObjectsArray[, optgroupIndex]);
	/*
	Add one or many optgroups.
	By default appends to the dropdown's root.
	Optionally, tell at what index the optgroup should appear.
	*/

$(selector).ikSelect('removeOptions', optionIndex[, optgroupIndex]);
$(selector).ikSelect('removeOptions', optionIndexesArray[, optgroupIndex]);
	/*
	Remove one or many options by index.
	Optionally, set *optgroupIndex* to look for indexes within particular optgroup.
	Set *optgroupIndex* as -1 to look only within root.
	*/

$(selector).ikSelect('removeOptgroups', optgroupIndex);
$(selector).ikSelect('removeOptgroups', optgroupIndexesArray);
	/* Remove one or many optgroups by index. */

$(selector).ikSelect('select', optionValue[, isIndex]);
	/*
	Change selected option using option's value by default
	or index if *isIndex* is *true*.
	*/

$(selector).ikSelect('showDropdown');
	/*
	Show fake select's dropdown.
	Caution: on mobile devices this method shows the fake dropdown, not the native one
	that is shown by default when tapping on the fake select itself.
	*/

$(selector).ikSelect('hideDropdown');
	/* Hide fake select's dropdown. */

$(selector).ikSelect('disable');
	/*
	Disable select.
	Also adds 'ik_select_link_disabled' class to the 'ik_select_link'.
	*/

$(selector).ikSelect('enable');
	/*
	Enable select.
	Also removes 'ik_select_link_disabled' class from the 'ik_select_link'.
	*/

$(selector).ikSelect('toggle'[, enableOrDisable]);
	/*
	Toggle select's state.
	Optionally, set *enableOrDisable* as *true* or *false* to specify needed state.
	*/

$(selector).ikSelect('disableOptions', optionIndexOrValue[, isIndex]);
$(selector).ikSelect('disableOptions', optionIndexesOrValuesArray[, isIndex]);
	/*
	Disable one or many options using option values by default
	or option indexes if *isIndex* is *true*
	*/

$(selector).ikSelect('enableOptions', optionIndexOrValue[, isIndex]);
$(selector).ikSelect('enableOptions', optionIndexesOrValuesArray[, isIndex]);
	/*
	Enable one or many options using option values by default
	or option indexes if *isIndex* is *true*
	*/

$(selector).ikSelect('toggleOptions', optionIndexOrValue[, isIndex, enableOrDisable]);
$(selector).ikSelect('toggleOptions', optionIndexesOrValuesArray[, isIndex, enableOrDisable]);
	/*
	Toggle one or many optgroups' state.
	Optionally, set *enableOrDisable* as true/false to specify needed state.
	*/

$(selector).ikSelect('disableOptgroups', optgroupIndex);
$(selector).ikSelect('disableOptgroups', optgroupIndexesArray);
	/* Disable one or many optgroups. */

$(selector).ikSelect('enableOptgroups', optgroupIndex);
$(selector).ikSelect('enableOptgroups', optgroupIndexesArray);
	/* Enable one or many optgroups. */

$(selector).ikSelect('toggleOptgroups', optgroupIndex[, enableOrDisable]);
$(selector).ikSelect('toggleOptgroups', optgroupIndexesArray[, enableOrDisable]);
	/*
	Toggle one or many optgroups' state.
	Optionally, set *enableOrDisable* as true/false to specify needed state.
	*/

$(selector).ikSelect('detach');
	/* Detach plugin from select and remove all traces. */

Examples

Check the Examples page.