Z notatnika webmasterki

Uzupełnianie innych pól

To co pokazałam w poprzednim odcinku było proste, prawda? A co jeśli chcemy, żeby wybranie pozycji z listy podpowiedzi spowodowało uzupełnienie innego pola <input/>, albo wypisanie jakiegoś komunikatu w wybranym miejscu? Na szczęście to też da się zrobić i nie jest bardzo trudne. Pierwsza modyfikacja to dodanie do formularza pola z kolejnym okienkiem <input/> oraz miejsca na komunikat. W tym celu miedzy dwa istniejące wiersze tabeli skonstruowanej w poprzednim odcinku wstawimy następujący kod:

W skrypcie generującym nasze podpowiedzi musimy nieco zmodyfikować wartości w tablicy:

Zmianie uległy łańcuchy znaków do których dodałam nazwy grupy i informację dodatkową, które wykorzystamy do uzupełnienia dodatkowych pól. Istotne jest, aby te dodatkowe dane były w łańcuchu znaków oddzielone znakiem ‘|’. Autocomplete działa tak, że w oknie podpowiedzi wyświetli nam to co znajduje się przed pierwszym znakiem ‘|’ a do skryptu przekaże (zaraz powiem jak to odebrać) tablicę powstałą z podzielenia wybranego przez użytkownika stringu względem znaku ‘|’.

Aby wykorzystać te informacje należy użyć kolejnej funkcji pluginu Autocomplete, czyli result(), którą dodajemy poniżej wywołania funkcji autocomplete() wpisując następujący kod:

Funkcja result() odbiera dane po wybraniu przez użytkownika pozycji z podpowiedzi i wrzuca je do tablicy arr_urzadzenie. Jeśli ta tablica nie będzie pusta (a będzie, gdy użytkownik nie skorzysta i wpisze coś czego w podpowiedziach nie ma) odpowiednie pola tablicy zostaną wpisane do okienka <input/> o id=”grupa” oraz do komórki tabeli <td/> o id=”komunikat”. To demo pokazuje jak działa formularz po wprowadzeniu tej modyfikacji.

A co jeśli zmienimy zdanie? Czyszczenie dodatkowych pól

Wprowadzone zmiany spowodowały, że po wybraniu pozycji z listy podpowiedzi w wybranych miejscach zostały automatycznie wpisane dodatkowe informacje. Co jednak, gdy sie rozmyślimy i wybierzemy inną pozycję z podpowiedzi? Nic złego, po prostu informacje te zostaną podmienione na nowe. Jednak, kiedy się rozmyślimy i wpiszemy wartość spoza listy widocznej w podpowiedziach stare dane nie znikną (można to łatwo sprawdzić w poprzednim przykładzie) i to nam trochę psuje zabawę. Na szczęście jest i na to lekarstwo, które poznałam dzięki uprzejmości Robert Nodzewskiego, który długo i cierpliwie tłumaczył mi jak to jest z tym jQuery.

Funkcja result() jest wywoływana za każdym razem, gdy użytkownik wybierze pozycję z okna podpowiedzi. Można jednak ją wywołać nawet wtedy, gdy użytkownik z podpowiedzi nie skorzysta. Służy do tego funkcja search() podłączona do atrybutu onblur w następujący sposób:

Gdy w ten sposób zmodyfikujemy pole <input/> funkcja result() zostanie wywołana nawet jeśli użytkownik wpisze dane spoza listy, ale nie zostaną do niej przekazane żadne wartości. Trzeba więc się odpowiednio przygotować na tę okoliczność. W tym celu dodajemy w kodzie odpowiedni watrunek:

No i proszę bardzo, już działa o czym można się przekonać uruchamiając to demo

Podobne artykuły:

1. Autouzupełnianie w polach formularza. Odc.3.
2. Autouzupełnianie w polach formularza. Odc.1.