Autocomplete with search transliteration from select tag?

Question

JavaScript

There is a regular list of the form:

<select><br>
<option value="1">Вася</option><br>
<option value="2">Петя</option><br>
<option value="3">Галя</option><br>
<option value="4">Roma</option><br>
</select><br>

You need to turn it into a search with autocomplete using the jquery plugin.
The search transliteration is required.

Example:
Enter "rum" into the search - finds "Roma"
Enter "ga" - finds "Galya"

Found a very good plugin harvesthq.github.com/chosen/
But it does not have search transliteration.

The server part is not needed.
Need pure jquery.

Who will advise something?

Answer 1

You can look at twitter typeahead . It can be quite easily tailored to your needs with event handlers.

Answer 2

You can take a good old crutch and fasten it to your chosen one at the time of the search :)

function JSfunc()
{
    /* Making transliteration! */
    this.strTranslit = function(el)
    {
        new_el = document.getElementById('out');
        A = new Array();
       A["Ё"]="YO";A["Й"]="I";A["Ц"]="TS";A["У"]="U";A["К"]="K";A["Е"]="E";A["Н"]="N";A["Г"]="G";A["Ш"]="SH";A["Щ"]="SCH";A["З"]="Z";A["Х"]="H";A["Ъ"]="'";
        A["ё"]="yo";A["й"]="i";A["ц"]="ts";A["у"]="u";A["к"]="k";A["е"]="e";A["н"]="n";A["г"]="g";A["ш"]="sh";A["щ"]="sch";A["з"]="z";A["х"]="h";A["ъ"]="'";
        A["Ф"]="F";A["Ы"]="I";A["В"]="V";A["А"]="A";A["П"]="P";A["Р"]="R";A["О"]="O";A["Л"]="L";A["Д"]="D";A["Ж"]="ZH";A["Э"]="E";
        A["ф"]="f";A["ы"]="i";A["в"]="v";A["а"]="a";A["п"]="p";A["р"]="r";A["о"]="o";A["л"]="l";A["д"]="d";A["ж"]="zh";A["э"]="e";
        A["Я"]="YA";A["Ч"]="CH";A["С"]="S";A["М"]="M";A["И"]="I";A["Т"]="T";A["Ь"]="'";A["Б"]="B";A["Ю"]="YU";
        A["я"]="ya";A["ч"]="ch";A["с"]="s";A["м"]="m";A["и"]="i";A["т"]="t";A["ь"]="'";A["б"]="b";A["ю"]="yu";
        new_el.value = el.value.replace(/([\u0410-\u0451])/g,
            function (str,p1,offset,s) {
                if (A[str] != 'undefined'){return A[str];}
            }
        );
    }
    /* Normalizes a string, eю => eyu */
    this.strNormalize = function(el)
    {
        if (!el) { return; }
        this.strTranslit(el);
    }
}
var oJS = new JSfunc();