Autouzupełnianie w polach formularza. Odc.2.

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:

<tr>
	<td> Grupa </td>
	<td> <input type="text" name="grupa" id="grupa"> </td>
</tr>
<tr>
	<td colspan="2" id="komunikat">&nbsp;</td>
</tr>

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

$dane = array('aparat|fotografia|hobby',
	'motor|motoryzacja|hobby',
	'rower|sport|rekreacja',
	'samochód|motoryzacja|praca',
	'telefon|telekomunikacja|praca',
	'telewizor|RTV|hobby');

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:

$("input#urzadzenia").result(function(event,arr_urzadz,formatted){
	if(arr_urzadz){
		$("input#grupa").val(arr_urzadz[1]);
		$("td#komunikat").html(arr_urzadz[2]);
	}
});

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:

$("input#urzadzenia").result(function(event,arr_urzadz,formatted){
	if(arr_urzadz){
		$("input#grupa").val(arr_urzadz[1]);
		$("td#komunikat").html(arr_urzadz[2]);
	}else{
		$("input#grupa").val('');
		$("td#komunikat").html('wybrano wartość spoza listy');		
	}
});

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