VPF::jQuery autocomplete - Форум программистов

Black_leopard

Дата 22.4.2012, 16:59 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 142
Регистрация: 18.10.2006

Репутация: нет
Всего: нет

Здравствуйте!

Уже который час не могу придумать как сделать чтобы при вводе названия или БИКа банка выводилась подсказка расширенная (не только определенная фраза, а название, бик в отдельной строке и с подстветкой искомой фразы).

Визуально должно получиться так:
http://floomby.ru/content/EyD41aBekO/full/

Вот что сделал сейчас:

Код


    $("#bankName").autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "/includes/ajax/bankname.php",
                contentType: "application/json; charset=utf-8;",
                dataType: "json",
                data: {
                    query: request.term
                },
                success: function( data ) {
                    response( $.map( data.bankes, function( item ) {
                        var u,r,t,i;
                        item.FullName.toLowerCase().indexOf(item.Query.toLowerCase()) < 0 ? u = item.FullName : (t = item.FullName.toLowerCase().indexOf(item.Query.toLowerCase()), i = item.FullName.substring(0,t)+"<strong>"+item.FullName.substring(t), u = i.substring(0,8 + item.Query.length + t) + "</strong>" + i.substring(8 + item.Query.length + t));
                        item.BIK.toLowerCase().indexOf(item.Query.toLowerCase()) < 0 ? r = item.BIK : (t = item.BIK.toLowerCase().indexOf(item.Query.toLowerCase()), i = item.BIK.substring(0,t)+"<strong>"+item.BIK.substring(t),r=i.substring(0,8+item.Query.length+t)+"</strong>"+i.substring(8+item.Query.length+t));
                        
                        return {    
                            label:u,
                            desc:"\u0411\u0418\u041a "+r,
                            value:item.FullName,
                            object:item
                        }
                    }));
                }
            })
        },
        autoFocus: true,
        minLength: 3,
        delay: 300,
        autoFocus:!0,
        onlyFromList:!0,
        select: function(event, ui) {
            //t&&t.item&&t.item.object&&t.item.object.BIK?$("#hiddenBik").val(t.item.object.BIK):($(this).val(""),$("#hiddenBik").val(""))
        },
        open: function(event, ui) {
            $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
//            for (var i in ui.item)
//            {
//                alert("1 + "+i);
//            }
        },
        close: function() {
            $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
        },
    });

все выводит корректно, но оформить нужным образом никак не получается.

Хотел бы еще отметить, что если просто после option source пройтись по полученному списку и представить к нужному виду будет работать некорректно.

Это сообщение отредактировал(а) Black_leopard - 25.4.2012, 14:29

Aliance

Дата 25.4.2012, 10:30 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 7
Всего: 137

jquery ui autocomplete не подходит?

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »