Features

  • custom syntax support
  • works perfect as an inline-block
  • no z-index bugs in IE
  • optgroups support
  • great API
  • add/remove '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

Options

All the options can be set using HTML5 data- attributes or as an object passed to the plugin. For the data- attibutes use lowercase!

syntax: '
'
Passing custom syntax to create fake select.
The only condition is that "ik_select_link_text" should be inside "ik_select_link" and "ik_select_list" should be inside "ik_select_block".
Other than that any syntax can be passed to plugin.
autoWidth: true(/false)
Set width of the select according to the longest option.
ddFullWidth: true(/false)
Set width of the dropdown according to the longest option.
equalWidths: true(/false)
Make the fake select and the dropdown of the same width.
customClass: ""
Add custom class to the fake select's wrapper.
ddCustomClass: ""
Add custom class to the fake select's dropdown.
ddMaxHeight: 200
Maximum allowed height for dropdown.
filter: false(/true)
Appends filter text input.
nothingFoundText: "Nothing found"
The text to show when filter is on and nothing is found.

Callbacks and events

onShow: function (inst) {} - also available as a ikshow event
Called when dropdown shows up.
onHide: function (inst) {} - also available as a ikhide event
Called when dropdown hides.
onKeyDown: function (inst) {} - also available as a ikkeydown event
Called when any key on a keyboard is pressed.
onKeyUp: function (inst) {} - also available as a ikkeyup event
Called when any key on a keyboard is released.
onHoverMove: function (hoverEl, inst) {} - also available as a ikhovermove event
Called when any hover state of an option changes.

API

$.ikSelect("set_defaults", )
Override defaults for new instances.
$(selector).ikSelect("reset")
Recreates content in the dropdown.
$(selector).ikSelect("redraw")
Recalculates dimensions for the dropdown.
Use this if the parent was hidden right after the animation begins.
$(selector).ikSelect("add_options", )
Add options by providing option values and strings.
Specify optgroup index if needed.
$(selector).ikSelect("remove_options", )
Remove options using array of values.
$(selector).ikSelect("select", )
Change selected option by value.
$(selector).ikSelect("show_dropdown")
Show dropdown assosiated with the passed select.
On mobile devices this method shows the fake dropdown, not the native one!
$(selector).ikSelect("hide_dropdown")
Hide dropdown assosiated with the passed select.
$(selector).ikSelect("disable")
Disable select.
$(selector).ikSelect("enable")
Enable select.
$(selector).ikSelect("toggle")
Disables enabled and enables disabled select.
$(selector).ikSelect("disable_options", )
Disable specific options.
$(selector).ikSelect("enable_options", )
Enable specific options.
$(selector).ikSelect("disable_optgroups", )
Disable specific optgroups.
$(selector).ikSelect("enable_optgroups", )
Enable specific optgroups.
$(selector).ikSelect("detach")
Detach plugin from select and remove all traces.

API Legend

[, ...]
{
        : ,
        ...
}
{
        : {
                : ,
                ...
                },
        ...
}

Tested in

Safari, Chrome, Firefox, Opera, IE6+

What you see is just an example of what could be achieved that works best in modern browsers with Unicode fonts. Although the script itself works great even in IE 6.

Don't use the provided theme as is on production, because it relies heavily on CSS3 and the tick symbol (✓) that is used in the dropdown is usually not available on Windows machines.

Instead make your own theme, that will be more cross-browser friendly.

Examples

custom syntax (adding arrows without :before and :after)

by the way you can easily use these selects inline just like that

view source

$(".select_custom_syntax").ikSelect({
        syntax: '
▲▼
'
});

view source

$(".select_custom_syntax").ikSelect("show_dropdown");

optgroups and autowidth

view source

$(".select_autowidth1").ikSelect();

view source

$(".select_autowidth1").ikSelect("select", "value4");

view source

$(".select_autowidth1").ikSelect("add_options", {
        0: {
                "value5": "option5"
        },
        1: {
                "value6": "option6"
        }
});

view source

$(".select_autowidth1").ikSelect("remove_options", ["value4", "value5"]);

fixed width for fake select, autowidth for dropdown

view source

$(".select_dd_autowidth").ikSelect({
        autoWidth: false
});

view source

$(".select_dd_autowidth").ikSelect("add_options", {
        "value5": "option5"
});

no autowidth

view source

$(".select_noautowidth").ikSelect({
        autoWidth: false,
        ddFullWidth: false
});

custom class

view source

$(".select_custom_class").ikSelect({
        customClass: "select_black",
        ddCustomClass: "select_black_block"
});

view source

var options_obj = {};
for(var i=5; i<1005; i++){
        optionValue = 'value'+ i;
        options_obj[optionValue] = 'option'+ i;
}

var d0 = new Date();
$(".select_custom_class").ikSelect("add_options", options_obj);
var d1 = new Date();
$(this).append(", "+ (d1-d0) +"ms");

add option with JS to original select and then reset the fake one

view source

$(".select_add_option").ikSelect();

view source

option_index = 5;
        $(".add_option_to_real").click(function(){
        $(".select_add_option").append("");
        option_index++;
        $(this).html('add option "option '+ option_index +'" to the real select and reset the fake one');
        $(".select_add_option").ikSelect("reset");
});

autowidth in limited space and ddFullWidth:false

view source

$(".select_autowidth_noddfullwidth").ikSelect({
        ddFullWidth: false
});

autowidth in limited space

view source

$(".select_autowidth2").ikSelect();

generating a fake select from the select with 1000 options

view source

$(".select_1000").each(function(){
        var html = "";
        for(var i=0; i<1000; i++){
                if(i==4){
                        html += '';
                } else{
                        html += '';
                }
        }
        $(this).append(html);
});

view source

$(".select_1000").ikSelect();

hidden select's parent

view source

$(".select_hidden").ikSelect();

view source

$(".select_hidden_wrap").fadeIn();
$(".select_hidden").ikSelect("redraw");

disabling different things

view source

$(".select_disable").ikSelect();

view source

$(".select_disable").ikSelect("disable");

view source

$(".select_disable").ikSelect("enable");

view source

$(".select_disable").ikSelect("toggle");

view source

$(".select_disable").ikSelect("disable_optgroups", [0]);

view source

$(".select_disable").ikSelect("enable_optgroups", [0]);

view source

$(".select_disable").ikSelect("disable_options", ['value3']);

view source

$(".select_disable").ikSelect("enable_options", ['value3']);

view source

$(".select_disable").ikSelect("detach");

select with filter

view source

$(".select_filter").ikSelect({
        filter: true
});

Links