Главная » Web, Интерфейс » Combobox и Autocomplete в одном

Combobox и Autocomplete в одном

Работая над Расписаниями пар онлайн, мне пришлось искать подходящий select с возможностью редактирования на Javascript. Это оказалась не такая простая задача, как кажется на первый взгляд. Есть много автокомплитов, и работают они замечательно. Есть много комбобоксов разного внешнего вида. Но вот два в одном — комбобокс и автокомплит — мало. Перед описанием работы с комбо-боксом ВКонтакте, опишу немного других вариантов.

Комбо-бокс JQuery-UI

Первое что попадает на глаз — это JQuery UI Autocomplete. Но чтобы сделать в нем нормальный комбо-бокс, надо хорошо помучиться с CSS. Да и затачивать под себя нехило. Например, в нем нет прокрутки открывающегося списка — это нужно делать самому. В общем, времени я на него убил порядочно, и даже какое-то подобие получилось.

Комбо-бокс из Вконтакте

Остальные мне показались еще более сырыми. Выделились еще два компонента — Hijack и Flexbox и ddcombobox. Первый не позволяет после ввода, нажав на кнопку вниз перейти к выбору вариантов. Второй по идее нормальный, но как-то не получилось вписать его в дизайн. ddcombobox — работает хорошо, но под старый JQUery и требует других плагинов.

В результате остался combobox из ВКонтакте. Он оказался наиболее быстрыми удобным в старте, без особых проблем со стилями. Правда, не знаю, можно ли его использовать. Но где-то же я нашел скудное описание )

<script type="text/javascript" src="http://vkontakte.ru/js/common.js">// <![CDATA[
<script type="text/javascript" src="http://vkontakte.ru/js/lib/ui_controls.js" />
	<link type="text/css" href="http://vkontakte.ru/css/ui_controls.css" rel="stylesheet" />

<script type="text/javascript">
$(function()
{
var dd = new Dropdown(document.getElementById('city_box'),
[["1","Москва"],["2","Санкт-Петербург"]],
{width: 450, label:"Город",autocomplete: true, enableCustom: true,
onChange: (function(value){ alert(dd.val()); });
// ]]></script>

Правда я столкнулся с сложностями подсовывания ему другого списка.
Можно установить адрес-источник автоподбора, но на открывающийся список это не влияет.
Пришлось идти другим путем:

dd.container.id = "city_box";
dd = //Здесь все как и выше

Пример кода на php, передающего список для комбо-бокса:
В примере используется хорошая библиотека для работы с MySql — goDB.
Она позволяет вообще передать данные в виде многомерного массива, и сразу отправить эти данные в combobox.

$start = $_POST["start"]."%";
$pattern = 'SELECT id,name
FROM cities
WHERE name LIKE ?
ORDER BY name LIMIT 1000';
$data = array($start);
 
$cities = $db->query($pattern,$data,"row");
 
if (!empty($citiess)) {
echo(json_encode($cities));
}
else {
$cities["none"]="Нет учебных заведений";
echo(json_encode($cities));
}

Этот же код можно использовать при пересоздании, для обновления списка, но через AJAX. На примере jQuery это выглядит так:

dd2 = new Dropdown(document.getElementById('city_box'),
<!--?php // здесь генерируется изначальный список (текст массива JS)
   $tt-?-->echoSearchResult($params); ?&gt;,
{width: 200,autocomplete: true, onChange: (function(value){
p = {}; //параметры запроса
p.id = value; //это для отбора по владельцу (город/страна), в примере php нет
p.start=""; //начало строки
$.getJSON("/json/search.php",p, function(j){
dd3.container.id = "inst_box"; // подготавливаем к затиранию
 
dd3 = new Dropdown(document.getElementById('inst_box'), // затираем
j,
{width: 200,autocomplete: true, enableCustom: true, onChange: (function(value){
})});
});
 
})});

Установить источник автоподбора можно вот так:

dd2.setURL("/json/search.php?type=city&id=1

Вот и вся работа. Получилось намного легче и приятнее чем любым способом JQuery. Правда не работает у тех, у кого заблокирован ВКонтакте. Да API контакта может меняться. Правда они давно уже используют новые элементы управления. Эти походу оставили народу )
Был бы комбобокс, который работал как этот, конечно же использовал бы его.

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

23 04 2011 | ImLoaD

Не поверишь, твоя статейка — единственное что вообще можно найти в интернете по этой конкретной теме, просто у меня такое же совпадение. Ищу ищу как связать combobox и autocomplete. Нужно для нового проэкта.. Но юзать ВКшный как то.. нарушать .. Можно конечно тупо тот «src» скрипта даунлоадить себе и (спиз@..) посмотреть, как они сделали.. И сделать себе такую функциональность 🙂 А на самом деле хотелось бы увидеть в этой статье немного подробнее описание, например мне не достаточно опыта в веб, что бы понять откуда именно беруться результаты (список городов …) исходя из статьи. В autocomplete знаю можно массив сделать, а можно обратиться к php, который полезет в базу, или в файл.. А тут откуда список стран, городов, учебных заведений? Из Вконтакте или из созданного списка? Или с какого нибудь ресурса типа гео неймс (это я обьективно), ответьте пожалуйста :)) Хотя в верху статьи прикручена цитата кода «[[«1″,»Москва»],[«2″,»Санкт-Петербург»]]» как вижу массив, но неужели самому создавать массивы — страны, города в каждой, и тем более учебные заведения в каждом из городов каждой страны? Наврядли.. Хотя стоп. Заметил! Если на сайте расписания занятий выбрать страну, допустим Австралия, список городов остается тот же, Российских! Так зачем же вообще комбобокс выбора государства? :))

23 04 2011 | PaNick

Немного обновил запись, добавил примеры кода То что список не меняется, это ошибка. Спасибо ) Просто у ВКшного контрола не получилось обновить список без удаления его и добавления с новым. Я просто использую скрипты непосредственно с контакта. Хотя это тоже не правильно. Но я не один такой ) Вскоре, наверное, откажусь от этого. Тем более что в HTML5 есть возможность сделать это стандартными средствами. Просто это пока поддерживает только Opera 11 ) Кстати, как и выбор даты из календаря. Контактовский Combobox воспринимает двумерный массив: Значение, Представление. Это удобно, так как многие авткомплиты только текст сохраняют. Массив герерируется в php при создании страницы, обычной выборкой из БД. Передача в существующую страницу идет в формате JSON. Для привязки нужно исользовать метод setURL контрола. В этом случае заполнять массивом изначально не обязательно. Просто опыт показал, что автокомплитом пользуются немногие. Большинство начинают искать в списке мышой. Поэтому и приходится загружать весь. При пересоздании контрола можно использовать тот же запрос к серверу, что и в setURL. Это очень удобно, хотя и не актуально, если грузить полные списки. Списки берутся из своей базы. Она скачана где-то с просторов интернета. Довольно легко ищется и в свободном доступе ) Геонеймс — хорошая штука, но смысла к ней обращаться не вижу. Итак определение города по IP сторонним сервисом тупит иногда и выдает ошибки. А контакт выдает только пачки по 10 городов.

• Запилил простой Push-сервер на Go
• Добавление записей ускоряет рост группы
• Быстрый memcached для python и django
• Инфобизнес
• Падение сайта победило penguin 2