Question

http://www.bulgaria-web-developers.com/projects/javascript/selectbox/

Is there any “keypress” event, so that user can jump to particular option? like we have country field and user wants to move to UK, then he need to scroll for finding UK in the list.

Answer 1

based on The Suresh Atta solution I’ve created the following jquery extension to implement a solution

/*** EXTEND SELECT BOX TO HAVE KeyUp feature *********/
jQuery.fn.KeyUpSelectBox = function (options)
{
var myHandler = this;

this.init = function ()
{
    var sb = $(this).selectbox(options);
    var sbSelector = sb.attr('sb');

    $("#sbHolder_" + sbSelector).on('keyup', function (e)
    {
        var currentOptionText = $("#sbSelector_" + sbSelector).text().toLowerI();
        var keyText = String.fromCharCode(e.keyCode).toLowerI();

        var selectOptions = myHandler.find('option');
        var firstIndexWithLetter = -1;
        var bSet = false;
        var moveToNext = false;
        var bFoundOption = false;

        if (currentOptionText.substring(0, 1) == keyText)
        {
            moveToNext = true;
        }

        for (var i = 0; i < selectOptions.length; i++)
        {
            var optionText = $(selectOptions[i]).text().toLowerI();
            //console.log(optionText + ': ' + optionText.substring(0, 1));
            if (optionText.substring(0, 1) == keyText)
            {
                if (moveToNext)
                {
                    if (firstIndexWithLetter == -1) { firstIndexWithLetter = i; }

                    if (bFoundOption)
                    {
                        sb.selectbox("change", $(selectOptions[i]).attr('value'), $(selectOptions[i]).html());
                        sb.val($(selectOptions[i]).attr('value'));
                        bSet = true;
                        break;
                    }

                    if (optionText == currentOptionText)
                    {
                        bFoundOption = true;
                    }
                }
                else
                {
                    sb.selectbox("change", $(selectOptions[i]).attr('value'), $(selectOptions[i]).html());
                    sb.val($(selectOptions[i]).attr('value'));
                    break;
                }
            }
        }

        if (moveToNext && !bSet && (firstIndexWithLetter != -1))
        {
            sb.selectbox("change", $(selectOptions[firstIndexWithLetter]).attr('value'), $(selectOptions[firstIndexWithLetter]).html());
            sb.val($(selectOptions[firstIndexWithLetter]).attr('value'));
        }
    });
}

myHandler.init();

return myHandler;
}

This extension uses a method named toLowerI that is a string prototype:

var patternLetters = /[öäüÖÄÜáàâéèêúùûóòôÁÀÂÉÈÊÚÙÛÓÒÔßãÃõÕçÇñÑ]/g;
var patternDateDmy = /^(?:\D+)?(\d{1,2})\.(\d{1,2})\.(\d{2,4})$/;
var lookupLetters = {
"ä": "a", "ö": "o", "ü": "u",
"Ä": "A", "Ö": "O", "Ü": "U",
"á": "a", "à": "a", "â": "a",
"é": "e", "è": "e", "ê": "e",
"ú": "u", "ù": "u", "û": "u",
"ó": "o", "ò": "o", "ô": "o",
"Á": "A", "À": "A", "Â": "A",
"É": "E", "È": "E", "Ê": "E",
"Ú": "U", "Ù": "U", "Û": "U",
"Ó": "O", "Ò": "O", "Ô": "O",
"ß": "s", "ã": "a", "Ã": "A",
"õ": "o", "Õ": "O", "ç": "c",
"Ç": "C", "ñ": "n", "Ñ": "N"
};

var letterTranslator = function (match)
{
    return lookupLetters[match] || match;
}

String.prototype.toLowerI = function ()
{
    return this.toLowerCase().replace(patternLetters, letterTranslator);
};

To use it, instead of calling .selectbox() call .KeyUpSelectBox()