Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

searching option from keyboard when different character encoding

I have select tag which has options in Georgian:

<select>
    <option value="1"> პირველი </option>
    <option value="2"> მეორე </option>
    <option value="3"> მესამე </option>
</select>

When I expand select tag and press "მ" on keyboard, I want to search option that begins on "მ". Everything working fine by default when characters are written in English. I have no idea how to fix it, can you suggest anything?

like image 714
karaxuna Avatar asked Nov 12 '22 08:11

karaxuna


1 Answers

I don't have Georgian characters on my keyboard, but at least I know Russian:

HTML:

<select id="select">
    <option value="0">Ноль</option>
    <option value="1">Один</option>
    <option value="2">Два</option>
    <option value="3">Три</option>
    <option value="4">Четыре</option>
    <option value="5">Пять</option>
    <option value="6">Шесть</option>
    <option value="7">Семь</option>
    <option value="8">Восемь</option>
    <option value="9">Девять</option>
</select>

JS:

document.getElementById('select').addEventListener('keypress', function (event) {
    var length = this.options.length;
    var char = String.fromCharCode(event.which);
    var keys = {
        a: 'ф',
        b: 'и',
        c: 'с',
        d: 'в',
        e: 'у',
        f: 'а',
        g: 'п',
        h: 'р',
        i: 'ш',
        j: 'о',
        k: 'л',
        l: 'д',
        m: 'ь',
        n: 'т',
        o: 'щ',
        p: 'з',
        q: 'й',
        r: 'к',
        s: 'ы',
        t: 'е',
        u: 'г',
        v: 'м',
        w: 'ц',
        x: 'ч',
        y: 'н',
        z: 'я',
        '[': 'х',
        ']': 'ъ',
        ';': 'ж',
        '\'': 'э',
        ',': 'б',
        '.': 'ю',
        '/': '.',
    };
    var key = keys[char];
    for (var i = 0; i < length; i++) {
        if (this.options[i].innerHTML.charAt(0).toLowerCase() === key) {
            this.selectedIndex = i;
            break;
        }
    }
});

And a working example: http://jsfiddle.net/wdSQv/1/ (tested in Firefox 20)

like image 177
micnic Avatar answered Nov 15 '22 04:11

micnic