Блог ищущего программиста

Еще один комбобокс с автокомплитом

textext-demoНашел замечательный компонент для JQuery, под названием TextExt. Очень близок к контактовскому. Правда пока у него есть определенные недостатки в поведении, но они решаемы. Компонент очень гибок и расширяем. Но я убил довольно много времени, на то, чтобы заставить его работать с парами ключ-значение. По умолчанию он работает только с тексовым массивом. Расширение делается достаточно просто и предусмотрено в виде плагина. Т.е. нужно переопределить менеджер значений, в котором прописать всю логику.

Исправить все на массив [value,text] получилось быстро, а вот вытащить значение выбранного текста у меня никак не получалось. Это потому, что я в объектной иерархии Javascript не силен. Сначала достучался до менеджера значений, затем пытался из него добраться до фильтра. В результате получился некий костыль. по идее работает все правильно, но требуется дополнительная инициализация менеджера. Это чтобы не менять код самого компонента. Думаю в будущем и с этим разберусь, а пока выкладываю так.

Модуль менеджера значений

 
function ItemManager1() {};
 
p = ItemManager1.prototype;
 
p.locallist = [];
 
p.init = function(core)
{
this.locallist = [];
};
 
p.filter = function(list, query)
{
var result = [],
i, item
;
 
this.locallist = list;
 
for(i = 0; i < list.length; i++)
{
item = list[i];
if(this.itemContains(item, query))
result.push(item);
 
}
 
return result;
};
 
p.itemContains = function(item, needle)
{
return this.itemToString(item).toLowerCase().indexOf(needle.toLowerCase()) == 0;
};
 
p.stringToItem = function(str)
{
var self = this;
list = this.locallist;
 
var result = [-1,str];
 
for(i = 0; i < list.length; i++)
{
item = list[i];
if(this.itemContains(item, str))
result = item;
}
 
return result;
};
 
p.itemToString = function(item)
{
return item[1];
};
 
p.compareItems = function(item1, item2)
{
return item1[1] == item2[1];
};
 
p.setList = function(list) {
this.locallist = list;
}

Функция создания комбобокса из поля textarea или input

 
function ddown(elId,list) {
 
   var ddr =  $('#'+elId)
        .textext({
            plugins : 'arrow autocomplete',
            autocomplete: {
            dropdown: {
                maxHeight: "250px"}
            },
            itemManager : ItemManager1
        });
 
        ddr.bind('getSuggestions', function(e, data)
        {
                textext = $(e.target).textext()[0],
                query = (data ? data.query : '') || ''
                ;
 
            $(this).trigger(
                'setSuggestions',
                { result : textext.itemManager().filter(list, query) }
            );
        })
        ;
 
    // Вот эта инициализация и нужна, чтобы значение можно было получить потом    
    ddr.data().textext._itemManager.setList(list);
 
        ddr.bind("setInputData",function(e,data){
 
                       changedReal = true;
                        $("#saveButton").css("visibility","visible");
                });
 
        return ddr;
 
}

Вот так можно получить значение из комбобокса

 
data.subj_id = ddr.data().textext._itemManager.stringToItem(ddr.val())[0];
data.subject = dd[id][0].val();

У компоненты есть еще одно неудобство. Я пока не нашел, как его исправить. Но суть такая: Если я проинициализировал комбобокс и выбрал какое-то значение, то после этого в выпадающем списке только одно значение. А если взять к примеру комбобокс ВКонтакте, то открывается полноценный список с фокусом на выбранном значении. Отписал как мог это на гитхабе, может разработчик сам поправит.

Но пока все же это самое удобное, что я нашел, после ВК.

Опубликовал 15th Апрель 2012.
Размещено в Интерфейс.
.

Ранее в этой же рубрике:


К записи 2 комментария

Прочитал на сайте (проблемы компьютера ) положительные отзывы о вашем ресурсе. Даже не поверил, а теперь убедился лично. Оказывается, меня не обманули.

Этот список неудобен для пользователей, так как им необходимо пролистать сотни вариантов, чтобы найти нужный. В этом случае функция автодополнения удобнее, так как пользователь получает возможность быстро отфильтровать список, введя одну-две буквы.

38 - здесь у нас SQL запросов.
0,114253 - время на генерацию страницы.