Z notatnika webmasterki

21 Paź, 2008

Autouzupełnianie w polach formularza. Odc.2.

Zamieszczony przez: Joanna w: jQuery

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 na "Autouzupełnianie w polach formularza. Odc.2."

1 | eL.

4. kwietnia 2009 o 1:52 pm

Avatar

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 | Joanna

19. kwietnia 2009 o 2:06 pm

Avatar

Masz rację. Małe niedopatrzenie :)

3 | johny-max

25. listopada 2009 o 6:45 am

Avatar

A ja sie nie zgodze…

4 | Joanna

25. listopada 2009 o 6:22 pm

Avatar

Przepraszam, a z czym się nie zgadzasz? :P

5 | Danielek

8. grudnia 2011 o 10:10 am

Avatar

Mi też nie działa więc jak powinien wyglądać ten skrypt z modyfikacją może ktoś pomóc?

6 | Danielek

8. grudnia 2011 o 10:54 am

Avatar

mam jeszcze jedno pytanko z jakiego pliku można edytować wygląd ? pola sugestii?

7 | Greg

11. stycznia 2013 o 1:57 am

Avatar

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??

8 | Joanna

24. lutego 2013 o 12:55 pm

Avatar

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 :)

9 | Rafał

3. września 2015 o 10:58 pm

Avatar

Hej. Jak sformatować wyświetlanie na tablet lub smartfona, rozwijana lista odjeżdża w prawo?

10 | rafik73

5. września 2015 o 7:42 am

Avatar

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!

11 | rafik73

5. września 2015 o 10:28 pm

Avatar

przy zoomie 0 jest ok, rozjeżdża się przy powiększeniu

12 | mwteam

26. października 2015 o 10:19 pm

Avatar

Hej, a jak to zrobić przy pomocy bd mysql?

13 | Joanna

26. października 2015 o 10:54 pm

Avatar

Podpowiedź jest w poprzednim odcinku ;)

14 | mwteam

26. października 2015 o 11:27 pm

Avatar

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ć:-)

15 | Joanna

27. października 2015 o 9:34 pm

Avatar

No to nie pozostaje nic innego jak w odpowiednim miejscu dodać odpowiednie zapytanie które wyciągnie z bazy odpowiednie dane ;)

Formularz komentarza

Lipiec 2018
P W Ś C P S N
« Cze    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Archiwa

About

Moje notatki z pracy

Subskrypcja

Wprowadź swój adres email aby zaprenumerować ten blog i otrzymywać powiadomienia o nowych wpisach przez email.

Dołącz do 40 pozostałych subskrybentów

Tematy

%d bloggers like this: