Еще один комбобокс с автокомплитом
Нашел замечательный компонент для 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();
У компоненты есть еще одно неудобство. Я пока не нашел, как его исправить. Но суть такая: Если я проинициализировал комбобокс и выбрал какое-то значение, то после этого в выпадающем списке только одно значение. А если взять к примеру комбобокс ВКонтакте, то открывается полноценный список с фокусом на выбранном значении. Отписал как мог это на гитхабе, может разработчик сам поправит.
Но пока все же это самое удобное, что я нашел, после ВК.
|
Ранее в этой же рубрике:
- Поиск нелогичностей через анализ посещений // 8th Октябрь 2011 //
- Combobox и Autocomplete в одном // 2nd Апрель 2011 // 2
К записи 2 комментария
Свежие записи
Комментарии
- Александра: Здравствуйте. Очень полезная и интересная статья! Спасибо Вам за эту информацию.
- Hosting: Этот список неудобен для пользователей, так как им необходимо пролистать сотни вариантов, чтобы найти...
- PaNick: да, при больших нагрузках такая проблема ощущается. убрал его, когда перевалил за 10к в сутки....
- Dorian: поставили пивик лег сервер… ну очень хорошая статистика! Ещё при каждом обновлении оного апокалипсис с...
- необычный: Спасибо. Прочитал с интересом, и вообще полезный у Вас блог
Прочитал на сайте (проблемы компьютера ) положительные отзывы о вашем ресурсе. Даже не поверил, а теперь убедился лично. Оказывается, меня не обманули.
Этот список неудобен для пользователей, так как им необходимо пролистать сотни вариантов, чтобы найти нужный. В этом случае функция автодополнения удобнее, так как пользователь получает возможность быстро отфильтровать список, введя одну-две буквы.