Jeśli mielibyście wskazać najpopularniejszą funkcjonalność wyszukiwarki (poza samym wyszukiwaniem), byłoby to najprawdopodobniej podpowiadanie wpisywanych słów. Autocomplete, bo o nim mowa, jest dostępny w Zend Frameworku w ramach biblioteki ZendX_JQuery. Jego zastosowanie jest wyjątkowo proste i sprowadza się do dodania do formularza jednego pola.
Polem tym jest ZendX_JQuery_Form_Element_Autocomplete. Wystarczy, że wskażemy adres, z którego będą wczytywane i mamy gotowy do użycia komponent.
Przykładowy formularz wygląda następująco
class Application_Form_Autocomplete extends Batman_Form
{
protected function _renderForm()
{
$ac = new ZendX_JQuery_Form_Element_AutoComplete('ac');
$ac->setJQueryParam('source', '/jquery/autocompletedata')
->setJQueryParam('minLength', 3)
->setJQueryParam('select', new Zend_Json_Expr('acSelected'))
->setLabel('Wpisz coś:');
$this->addElement($ac);
}
}
Jeśli chcemy, aby autocomplete działał, musimy ustawić przynajmniej jedną opcję – source. Bez tej opcji wyrzucony zostanie wyjątek informujący o braku źródła danych. Jako źródło podany został adres, z którego będą zwracane dane w postaci JSON. Pozostałe parametry są opcjonalne, a ich listę znajdziecie w dokumentacji jQuery. Jeżeli chcieli byście skorzystać z funkcji zwrotnych (w powyższym przykładzie jest to funkcja acSelected), musicie pamiętać o stworzeniu obiektu Zend_Json_Expr. Dzięki temu ciąg przekazany jako parametr nie zostanie zamieniony na zwykły string.
Akcja kontrolera odpowiedzialna za zwrócenie danych nie różni się niczym od pozostałych akcji, za wyjątkiem wywołania helpera json.
public function autocompletedataAction()
{
// Wpisana przez użytkownika fraza
$term = $this->_getParam('term');
// Dane zwrócone do użytkownika. Mogą pochodzić z bazy danych, plików, itp
$data = array(
array(
'id' => 1,
'label' => 'pierwsza pozycja'
),
array(
'id' => 2,
'label' => 'druga pozycja'
)
);
$this->_helper->json($data);
}
Dane wpisywane w polu autocomplete przekazywane są w zmiennej term. Na jej podstawie można wyszukać odpowiednie informacje w bazie, pliku lub dowolnym innym źródle danych. Ważne, aby zapisać te dane w postaci tablicy. Jeśli zależy wam na dodatkowych danych, możecie stworzyć w tablicy kolejne klucze i wypełnić je odpowiednimi danymi. Dane te będą dostępne z poziomu Javascript po odebraniu odpowiedzi ze skryptu. Na samym końcu akcji wykorzystany został helper json, który jest odpowiedzialny za ustawienie odpowiedniego typu odpowiedzi oraz za wyłączenie layoutu.
I to wszystko. Jeden prosty formularz oraz jedna akcja i mamy zaimplementowaną funkcjonalność autocomplete.
Kanał ATOM
