jQuery jEC Demos

Default functionality
Using existing options
Disabling and enabling combobox
Setting values
Setting preferences
Creating from the scratch
Blinking cursor
Max input length

This demo shows the default combobox behavior. Select the combobox below and start typing to see the effect.

$('#demo1').jec();

This demo allows you to use existing options as a part of the custom combobox value.

$('#demo2').jec({useExistingOptions: true});

This demo allows you to dynamically disable and enable combobox features.

$('#demo3').jec();

$('#disable').click(function () {
    if ($(this).val() === 'Disable') {
        $(this).val('Enable');
        $('#demo3').jecOff();
    } else {
        $(this).val('Disable');
        $('#demo3').jecOn();
    }
});

This demo allows you to get and set combobox value.

$('#demo4').jec();

$('#getVal').click(function () {
    $('#value').val($('#demo4').jecValue());
});

$('#setVal').click(function () {
    $('#demo4').jecValue($('#value').val());
});

This demo allows you to get and set one of the combobox' preferences (editable option's position).

$('#demo5').jec();

$('#getPref').click(function () {
    $('#pref').val($('#demo5').jecPref('position'));
});

$('#setPref').click(function () {
    $('#demo5').jecPref('position', Number($('#pref').val()));
});

This demo show the creation of editable combobox from the scratch (pure JavaScript).

var options, cb;

options =  [{1: 'Alfa Romeo', 2: 'Ferrari', 3: 'Porsche'}];
cb = $.jec(options);

$('#demo-6 code').after(cb);

This demo shows the blinking cursor. This feature doesn't work on Internet Explorer.

$('#demo7').jec({blinkingCursor: true, blinkingCursorInterval: 500});

This demo shows the limiting input length. Try entering more then 3 characters.

$('#demo8').jec({maxLength: 3});