Autosuggest или автозаполнение полей форм - отличное средство для облегчения работы клиентов при поиске или вбивании однотипных или повторяющихся данных в формы. Введённый в широкие массы благодаря Google suggest, эта техника быстра нашла поддержку среди web-разработчиков и добавила проблем тем кто отвечает за стабильность и архитектуру инфосистем во многом из-за увеличившийся в разы нагрузке на полнотекстовый поиск по базе данных.

В данной статье я рассматриваю готовое решение от BrandSpankingNew, которое вероятно многие уже могли видеть на том же iconfinder.net, а теперь и на aleria.net.

BSN Autosuggest 2.1.3 представляет из себя лишь набор css, изображений и js-обработчика. Установка очень простая. Необходимое input-поле обязательно должно иметь id параметр. После этого подгружается js и css. В самом конце создаётся инициализирующий объект, который в свою очередь привязывает к полю event-ы и занимается всей работой по получению сформированного ответа на запрос поиска.

Инициализирующий объект с настройками:

Как можно видеть из настроек - мы привязываем к полю search_input автозаполнение, а всю процедуру поиска выполняет скрипт search.php. Он может выдавать результаты как в JSON, так и в XML формате, но поскольку нет необходимости в универсальном выводе (id,value,info прошиты в js), JSON можно сгенерировать и просто как строчки без полной трансформации php-объектов в JSON.

Результат поиска в JSON-формате:

{ results: [
	{ id: "1", value: "Foobar", info: "Cheshire" },
	{ id: "2", value: "Foobarfly", info: "Shropshire" },
	{ id: "3", value: "Foobarnacle", info: "Essex" }
] }

Microsoft Excel - незаменимый spreadsheet-редактор, попробуем сделать нечто похожее уже в web-середе.

Выбираем Simple spreadsheet, который уже умеет достаточно много, немного его исправим и создадим возможность сохранять все данные в БД. GPL лицензия также радует.

Прежде всего - изменить размеры редактируемого окна, которое запускается из spreadsheet.php. Для этого изменяем styles.css и при необходимости - spreadsheet.js, где делаются собственно таблицы.

Дальше - сделаем сохранение данных. Для этого надо весь код поместить в форму, добавить submit, к которому приписать onclick='save();'

Simple spreadsheet хранит все данные в своём "javascript" формате который фактически просто переменные инициализации, поэтому сохранять данные мы будем не только их, но и данные в csv формате. Для этого есть функция saveCSV, которую достаточно немного изменить и добавить спрятанный textarea c id='csv'.

getObj("csv").value = out;

Данные сохраняются в таблицу БД. Что-бы их обратно показать в таблице для изменений, достаточно в spreadsheet.php сохранённые данные передать в $init_data

Для чтения CSV надо выдавать заголовок типа

header("Pragma: public");
header('Content-Type: text/csv');
//header('Content-Type: application/vnd.ms-excel');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header("Content-Description: downloaded from iunu.net as an example");
header('Content-Disposition: attachment; filename="'.MD5(time()).'.csv"');

Код достаточно понятен, например что-бы при нажатии Tab фокус переходил на соседнюю клетку, я добавил в функцию keypress практически в самый конец

if (keyCode==9) {
saveCell();
ret=false;
editCell(currRow,currCol+1,keyCode);
}

Если csv не подходящий вариант, и хочется создания xls, можно воспользоваться портированным с perl, writeexcel 'ем, а для импорта xls есть spreadsheet_excel_reader однако проблемы с utf8 всё ещё не имеются..

FckEditor - WYSIWYG редактор, но технически он построен очень нерасширяемо, поэтому делать plugin-ы и изменения очень сложно, но сейчас не в этом проблема.

Достаточно неудобно добавление ресурсов - все файлы разделяются по трём папкам - image, files, flash куда доступ получается в зависимости от нажатой кнопки. Неудобство в том, что нельзя нормально группировать тематические наборы файлов, т.е. нельзя создать папку "training 1995", куда можно было бы залить и картинки и flash, и остальное.

Попробуем убрать эти ограничения..

Чтобы увидеть все виды ресурсов, независимо от нажатой кнопки, в filemanager/browser/default/frmresourcetype.html комментируем строку..
//if ( oConnector.ShowAllTypes || aTypes[i][0] == oConnector.ResourceType )

Чтобы сделать фильтр файлов в зависимости от нажатой кнопки - в editor/fckdialog.html добавляем после body
iframe width=0 height=0 style="display:none;" id="sessx" src="fckblank.html">

а ниже в script раздел ставим
document.getElementById('sessx').src = 'fcksess.php?rtype='+window.dialogArguments.Page;

Соответсвенно создаём файл fcksess.php
switch($_GET['rtype']){
case 'dialog/fck_image.html': setcookie('rtype','image',time()+3600); break;
case 'dialog/fck_flash.html': setcookie('rtype','flash',time()+3600); break;
default: setcookie('rtype','link',time()+3600); break;
}

И установим собственно фильтр в filemanager/ browser/ default/ connectors/ php/ commands.php в функцию GetFoldersAndFiles до строчки $aFiles[] добавляем:

$sFileExt=explode('.',$sFile);
$sFileExt=$sFileExt[count($sFileExt)-1];

if (
($_COOKIE['rtype']=='image' && in_array(strtolower($sFileExt), array('jpg', 'jpeg', 'gif','png', 'bmp', 'tif')))
|| ($_COOKIE['rtype']=='flash' && in_array(strtolower($sFileExt),array('swf','fla')))
|| $_COOKIE['rtype']=='link'
)

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

Веб-графика становится всё качественней, фотоаппараты дешевле, фотошоп в массах, что же сделать что-бы пользователю было ещё легче просматривать уймы фото на сайте?

Галереи отбросим в сторону, со всеми постраничными видами, вырезкой квадратиком и тп.

Lightbox придуманная для улучшения просмотра фото "на лету" не долго оставалась в тени, автор быстро подхватил волну и наклепал Lighbox 2.0, которая тут же стала популярной и среди Wordpress. Увы несмотря на то что изначально развижка очень эффектна, со временем понимаешь что она немного медленная, да и простота конструкции очевидна. Для работы нужен prototype.js

Highslide с другой стороны немного менее эффектна в области затенения всего экрана, но зато может похвастаться отличным zoom-эффектом, скоростью и естественными курсорами. Wordpress также не обошёлся стороной.