Yii: autouzupełnianie w dynamicznych obiektach formularza

Z podpowiedziami w polu tekstowym formularza uporałam się szybko. W Yii to naprawdę jest proste. Trudności zaczęły się gdy trzeba było zastosować autouzupełnianie do pól formularza, które są generowane automatycznie po załadowaniu strony za pomocą javascript. W tym wypadku widget nie pomoże i trzeba zadziałać inaczej.

Dołączanie skryptów JS

W pierwszej kolejności należy zadbać o to, żeby odpowiednie skrypty jQuery zostały dołączone do witryny. O dołączanie ich do projektu nie trzeba się w ogóle martwić. Pierwsze co przychodzi do głowy to dodać w nagłówku szablonu strony odpowiednie znaczniki HTML. Nie radze tego robić w ten sposób. Lepiej skorzystać z faktu, że w Yii jest dość sprawny autoloader i zasugerować mu dołączenie Dlaczego zasugerować? No bo gdyby się okazało, że jakiś widget albo inny element frameworka już zgłosił zapotrzebowanie na dany skrypt to autoloader nie dołączy go dwukrotnie.

Czego potrzebujemy, żeby mieć autouzupełnianie? Skryptu jquery, jquery.autocomplete i jquery-ui.min, Skrypty te można dołączyć na przykład w kontrolerze który przygotowuje nasz formularz z podpowiadaniem albo w widoku samego formularza. Wystarczy wpisać następujący kod:

Yii::app()->clientScript->registerCoreScript('jquery');
Yii::app()->clientScript->registerCoreScript('autocomplete');
Yii::app()->clientScript->registerCoreScript('jquery.ui');

Ja zdecydowałam się wstawić ten kod do widoku formularza, gdyż widoku tego używam w kilku kontrolerach (dodawanie oraz aktualizacja danych) Więcej o dodawaniu niezbędnych skryptów można znaleźć na stronie wiki frameworka Yii.

Potrzebny jeszcze będzie niewielki skrypt w którym znajdzie się kod odpowiedzialny za dodawanie pól formularza na życzenie oraz obsługę autouzupełniania w tych polach. O ile skrypty o których mowa była wcześniej umieszczane są automatycznie w katalogu assets to już skrypty tworzone napotrzeby serwisu lepiej umieszczać gdzie indziej, na przykład w katalogu js. Katalogu assets lepiej nie modyfikować ręcznie. Aby dodać taki skrypt (o zawartości za chwilę) wystarczą dwie linie kodu:

$strBaseUrl = Yii::app()->request->baseUrl;
Yii::app()->clientScript->registerScriptFile($strBaseUrl.'/js/nazwa.js');

Pora zająć się teraz zawartością tego skryptu. Wpierw mało odkrywczy fragment, który pozwoli nam dodawać kolejne pola typu input po naciśnięciu buttona:

 var addInput = function() {
 var inputHTML = " <input name='search' value='' class='searchInput' maxlength='20' />";
 $(inputHTML).appendTo("form#myForm");
 };

 $("input#addButton").click(addInput);

Druga część skryptu odpowiedzialna jest za autouzupełnianie. Najpierw definicja opcji a potem delegowanie zdarzenia do obiektów klasy ‘searchInput’. Proste, prawda?

 var options = {
 source: 'http://domena.pl/data/list',
 minLength: 2
 };

 $(document).delegate('.searchInput',"keydown.autocomplete", function() {
 $(this).autocomplete(options);
 });

Wygląd listy podpowiedzi trzeba jeszcze tylko ładnie ostylować według własnych preferencji. Można tez skorzystać z gotowego zestawu dołączonego do UI ale trzeba ten arkusz ręcznie dołączyć.

$cs = Yii::app()->getClientScript();
$cssCoreUrl = $cs->getCoreScriptUrl();
$cs->registerCssFile($cssCoreUrl . '/jui/css/base/jquery-ui.css'); 

I teraz to już naprawdę wszystko.