Приветствую всех!

Сегодня я покажу небольшой пример использования виджета CAutoComplete из фреймворка Yii. Как несложно догадаться, он создаёт текстовое поле, под которым может появляться список с вариантами подстановок.

Принцип создания такого поля довольно прост. На странице нужно поместить обычное текстовое поле и назначить событию onKeyUp обработчик, который будет отправлять AJAX запросы серверу. В этих запросах нужно передавать введённый посетителем текст. Сервер ищет совпадения с этим текстом в БД и возвращает результат браузеру. JavaScript обработчик создаёт список с вариантами, полученными от сервера, и показывает его под полем.

Как видите, алгоритм несложный, но рутинной работы много.

Теперь, давайте разберёмся, что сделает за вас виджет, а что придётся делать вам.

Для работы виджет использует плагин Autocomplete библиотеки jQuery, т.е. писать JS код от вас не потребуется (если, конечно, вы не хотите изменить стандартное поведение плагина).

Кроме того, виджет создаст текстовое поле и подключит все необходимые JS и CSS файлы. Вам нужно будет только указать некоторые настройки.

Основная часть вашей работы будет заключаться в написании метода, выполняющего обработку запросов и поиск данных в базе.

Теперь рассмотрим пример.

Допустим, у нас есть база данных с названиями стран. Таблица называется countries, а поле, в котором хранятся названия – c_name.

Создаём для этой таблицы модель.

yiic shell
model countries

Примечание. Тут я предполагаю, что у вас создано веб приложение и настроено подключение к базе данных.

Теперь нужно создать текстовое поле. CAutoComplete – это обычный виджет, поэтому поместить его можно где угодно. Если хотите, чтобы поле выводилось на отдельной странице – добавляйте его в соответствующее представление, хотите показывать на каждой странице – добавляйте в макет (layout).

Код вставки виджета выглядит так.

Во втором параметре необходимо передать массив с параметрами. Обязательными являются первые два.
model – имя модели.
name – атрибут name текстового поля.
url – адрес скрипта, который будет обрабатывать AJAX запросы.
minChars – минимальное количество символов, при котором выполняется отправка запроса.

Естественно, это не все параметры. Подробный их перечень вы найдете на странице документации.

По мере ввода текста серверному скрипту будут отправляться AJAX запросы вида:

index.php?r=countries/autocomplete&q=%D0%B0%D0%BB&limit=10&timestamp=1273944702297

В параметре q передаётся введённый посетителем текст, а в параметре limit – максимальное количество подстановок.

Рассмотрим метод, выполняющий обработку этого запроса.

Здесь мы проверяем, пришли ли параметры и формируем запрос.

Условие записываем с помощью класса CDbCriteria. В атрибуте condition указываем название поля и операцию сравнения (LIKE). В атрибуте params – текст, введенный пользователем. Обратите внимание, мы добавляем к нему знак %, т.е. найдены будут все страны, названия которых начинаются с указанных букв.

Затем добавляем параметр limit и выполняем запрос (findAll).

Из результатов поиска формируем строку с найденными названиями стран. Разделителем служит символ новой строки (это требование плагина). И отправляем результат браузеру.

Как видите, пользоваться виджетом совсем не сложно.

Все вопросы, советы и замечания пишите в комментариях.

Удачи!