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

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

$this->widget('CAutoComplete',
    array(
        'model'=>'countries',
        'name'=>'country',
        'url'=>array('countries/autocomplete'),
        'minChars'=>2,
    )
);

Во втором параметре необходимо передать массив с параметрами. Обязательными являются первые два. model – имя модели. name – атрибут name текстового поля. url – адрес скрипта AJAX запросы. minChars – минимальное количество символов, при котором выполняется отправка запроса. По мере ввода текста серверному скрипту будут отправляться AJAX запросы вида: index.php?r=countries/autocomplete&q=%D0%B0%D0%BB&limit=10&timestamp=1273944702297В параметре q передаётся введённый посетителем текст, а в параметре limit – максимальное количество подстановок. Обработка запроса:

public function actionAutoComplete() {
    if (isset($_GET['q'])) {
        $criteria = new CDbCriteria;
        $criteria->condition = 'c_name LIKE :country';
        $criteria->params = array(':country'=>$_GET['q'].'%');
         if (isset($_GET['limit']) && is_numeric($_GET['limit'])) {
            $criteria->limit = $_GET['limit'];
        }
        $countries = countries::model()->findAll($criteria);
        $resStr = '';
        foreach ($countries as $country) {
            $resStr .= $country->c_name."\n";
        }
        echo $resStr;
    }
}

Leave a Comment

Fields with * are required.

Please enter the letters as they are shown in the image above.
Letters are not case-sensitive.