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

15 komentarzy do wpisu „Autouzupełnianie w polach formularza. Odc.2.”

  1. Twoj przyklad nie dziala.. a przynajmniej jego uzupelnienie (to z czyszczeniem)
    z przyczyn dosc oczywistych: arr_urzadz zawsze bedzie posiadal jakas wartosc (chociazby „urzadzenie spoza listy”), dlatego warunek zawsze bedzie spelniony.

    nalezy w warunku wstawic arr_urzadz[1], co zapewnia nam sprawdzanie czy podalismy conajmniej dwa argumenty w tabeli (w js tabela indeksowana jest od 0).

    czyli nalezy umiescic: if(arr_urzadz[1]) { … } else { … }, aby warunek w naszym przypadku byl „sprawdzalny”.

  2. Proszę powiedz jak uzupełnić 2 pozostałe inputy mając tablicę z 3 elementami?? Nie mogę zrozumieć skąd skrypt wie jak podzielić przez | ten znak??

  3. Skąd skrypt wie? To jest zaszyte w pluginie autocomplete. Dla niego kolejne elemeny po kresce mają kolejne indeksy. Do bieżącego wykorzystuje index 0 a z pozostałymi możesz zrobić co Ci się podoba. Ja wykorzystałam je w ten sposób, że wyświetliłam index 1 w input#grupa a index 2 w td#komunikat. Patrz na ostatni listing w tym artykule :)

  4. Problem na smartfonie: lista rozwijana, która się pojawia po wpisaniu tekstu odsuwa się znacznie w prawo od inputa wyszukiwarki. Smartfon: Sony Xperia e4g, przeglądarka : chrome. grzebanie w css nic nie daje. help!

  5. Tak ale w wypadku 1 opcji, mam takie zapytanie:

    $wartosc) {
    if(preg_match(‚/^’.($q).’/’,($wartosc))){
    echo $wartosc.PHP_EOL;
    $i++;
    }
    }

    if(!$i) echo ‚adres spoza listy\n’;

    ?>

    Teraz bym chciał by po wyszukaniu danego numeru nadwyżki pokazały się inne dane które są zapisane w bd, np. kod, nazwa, seria ,data_waznosc, ilosc_sztuk, opis. Proszę o pomoc – nakierowanie jak to zrobić:-)

Dodaj komentarz

%d bloggers like this: