Автокомплит с транслитирацией поиска из тега select?

Question

[Genius_A]

Имеется обычный список вида:

<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>

Нужно превратить его в поиск с автокомплитом средствами(плагином) jquery.

Обязательно наличие транслитерации поиска.



Пример:

Вводим в поиск «ром» — находит «Roma»

Вводим «ga» — находит «Галя»



Нашел очень хороший плагин harvesthq.github.com/chosen/

Но в нем нет транслитерации поиска.



Серверная часть не нужна.

Нужен чистый jquery.



Кто присоветует что-то?

Answer 1

[Yuri Shikanov]

Можно посмотреть на twitter typeahead. Его можно довольно легко заточить под требования с помощью обработчиков событий.

Comments

[Genius_A]

Спасибо за вариант!
К сожалению у него нет готового механизма работы с select, да и остальной функционал нужно изобретать.

[Yuri Shikanov]

Вспомнил ещё вот этот вариант. Насчет транслитерации не уверен, но возможно получиться докрутить.

[RubaXa]

twitter typeahead и Select2 — не умеют транслитерировать. Такая возможность очень специфичная, на mail.ru, мы очень долго тюнили этот механизм, и он не ограничивается простой транслитерацией, есть также сочетания букв.

[Genius_A]

А mail.ru не готова поделиться своим решением?

[RubaXa]

С удовольствие поделился бы, но пока всё жестко завязано на наших технологиях, но мы двигаемся в этом направлении. Можно попробовать взять Select2, он всё же более продвинутый, и внедриться в его код.

[Genius_A]

Похоже так и придется делать.

Answer 2

[freeek]

Можете взять старый добрый костыль и прикрутить в момент поиска к chosen'y :)

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();

Comments

[freeek]

Простите за парсер. Вот, нашел ссылку.

[Genius_A]

Есть и более качественный библиотеки для транслитерации.
Интересно именно готовое решение с транслитерацией.

[freeek]

Суть у этих библиотек схожая :)

Готового решения не встречал в открытом виде, помнится, был схожий вопрос.