Autouzupełnianie w Yii

Z braku lepszego zajęcia programistycznego pracuję nad pewnym niekomercyjnym (przynajmniej na razie) projektem realizowanym w oparciu o framework Yii. Nie będę ukrywać polubiłam go. Funkcjonalność serwisu pomaga mi dopracować grupa przyszłych użytkowników, którzy już przebierają nóżkami nie mogąc się doczekać realizacji. Padła sugestia, która prędzej czy później musiała się pojawić, bo była po prostu słuszna: “Zróbmy w tym formularzu autouzupełnianie na podstawie słów kluczowych z bazy, żeby użytkownik nie szukał po omacku”. No to zróbmy.

W Yii nie jest to wcale trudne. Można wręcz powiedzieć, że samo się robi bo w bibliotekach jest wszystko co trzeba. Wystarczy skorzystać z widgetu CJuiAutoComplete, skonfigurować jak potrzeba i stworzyć kontroler pobierający odpowiednie dane z bazy i już. No ale może po kolei.

Wspomniany widget korzysta z pluginu JUI autocomplete opartego na jQuery. Na szczęście nie trzeba niczego ściągać, instalować i dołączać. Widget sam zadba aby załadować odpowiednie klasy i skrypty, które już się we frameworku znajdują.

Wystarczy w formularzu, w miejscu w którym ma się znajdować pole tekstowe z autouzupełnianiem wstawić następujący kod:

$this->widget('zii.widgets.jui.CJuiAutoComplete', array(
    'name'=>'slowo',
    'source'=>Yii::app()->createUrl('/data/list'),
    // dodatkowe opcje javascript do pluginu autocomplete
    'options' => array(
        'showAnim' => 'fold',
        'minLength' => 2,
    ),
    //dodatkowe opcje atrybuty HTML
    'htmlOptions' => array( 'maxlength' =>'255' ),
    )
);

Pole ‘source’ wskazuje, jak można się domyśleć, na źródło podpowiedzi w autouzupełnianiu. W naszym przypadku chcemy, żeby to była dynamiczna tablica pobierana z bazy danych (choć może to być również statyczna tablica). Wobec tego w polu tym podajemy link (tu stworzony dynamicznie) do akcji w której dane zostaną pobrane z bazy i przygotowane do wyświetlenia. Akcja znajduje się w kontrolerze ‘DataController’ i jest zdefiniowana następująco:

   public function actionList()
    {
        
        $term   = isset($_REQUEST['term']) ? trim($_REQUEST['term']) : '';
        $term   = addcslashes($term, '%_');

        $criteria = new CDbCriteria();
        $params   = array();
        if(!empty($term)){
            $criteria->condition =   'name LIKE :term' ;
            $params[':term'] = '%$term%';
        }
        $criteria->params = $params;
        $criteria->select = 'name';
        $criteria->offset = 0;
        $criteria->limit  = 10;
        $criteria->order  = 'name';
        

        $arrIngr = Ingredient::model()->findAll($criteria);
        
        $data = array();
        if(!empty($arrIngr)) foreach($arrIngr as $arrData){
            $data[] = $arrData['name'];
        }
        
        echo CJSON::encode($data);
        
    }

I to już wszystko. Naprawdę. Aha, ustawienie pluginu ‘minLength’ => 2 oznacza, że podpowiedzi pojawią się po wpisaniu dwóch znaków.

Leave a Reply

%d bloggers like this: