jQuery SelectBox 插件按键

Question

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

是否有任何“按键”事件，以便用户可以跳转到特定选项？就像我们有国家/地区字段并且用户想要搬到英国，那么他需要滚动以在列表中查找英国。

Answer 1

基于 Suresh Atta 解决方案，我创建了以下 jquery 扩展来实现解决方案

/*** 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;
}

此扩展使用名为 toLowerI 的方法，它是一个字符串原型(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);
};

要使用它，请调用 .KeyUpSelectBox()，而不是调用 .selectbox()