Jak zrobić prostą wyszukiwarkę/filtr produktów z listą z radio? Opcje

[marcus755]

Hej,

Jak zrobić prostą wyszukiwarkę/filtr produktów, gdzie po zaznaczeniu odpowiednich radio, a potem kliknięciu buttona "search" przefiltrują się nam divy z zawartością?

[HTML] pobierz, plaintext 
 
<div class="block">
 
<h3 class="search">Kategoria 1</h3>
<input name="kat_1" type="radio" value="0"><label for="kat_1">Pozycja 1 kat1</label><br>
<input name="kat_1" type="radio" value="1"><label for="kat_1">Pozycja 2 kat1</label><br>
<input name="kat_1" type="radio" value="2"><label for="kat_1">Pozycja 3 kat1</label><br>
</div>
 
<div class="block">
<h3 class="search">Kategoria 2</h3>
<input name="kat_2" type="radio" value="0"><label for="kat_2">Pozycja 1 kat2</label><br>
<input name="kat_2" type="radio" value="1"><label for="kat_2">Pozycja 1 kat2</label><br>
<input name="kat_2" type="radio" value="2"><label for="kat_2">Pozycja 1 kat2</label>
</div>
 
<div class="block">
<h3 class="search">Kategoria 3</h3>
<input name="kat_3" type="radio" value="0"><label for="kat_3">Pozycja 1 kat3</label><br>
<input name="kat_3" type="radio" value="1"><label for="kat_3">Pozycja 1 kat3</label><br>
<input name="kat_3" type="radio" value="2"><label for="kat_3">Pozycja 1 kat3</label>
</div>
 
<div class="bottom"><input name="SEARCH" type="submit" value="SEARCH" class="btn_search"></div>
 
</div>
 
[HTML] pobierz, plaintext 

Zwykły filtr może wyglądać np. tak:

[HTML] pobierz, plaintext 
                 <nav>
			<a href="#" id="prod1">link 1</a>
			<a href="#" id="prod2">link 2</a>
			<a href="#" id="prod3">link 3</a>
			<a href="#" id="prod4">link 4</a>
		</nav>
 
                <div class="box prod1 prod2">box prod1 prod2</div>
		<div class="box prod1 prod2">box prod1 prod2</div>
		<div class="box prod1 prod3">box prod1 prod3</div>
		<div class="box prod1 prod3">box prod1 prod3</div>
		<div class="box prod1 prod2">box prod1 prod2</div>
		<div class="box prod1 prod4">box prod1 prod4</div>
		<div class="box prod1 prod4">box prod1 prod4</div>
		<div class="box prod1 prod4">box prod1 prod4</div>
 
		<script>
$(function(){
	$('nav>a').click(function(e){
		e.preventDefault();
		var id=$(this).attr('id');
		$('div.box:not(.'+id+')').hide('slow');
		$('div.'+id).show('slow');
	});
});
		</script>
 
[HTML] pobierz, plaintext 

Jak przekształcić powyższy skrypt, ew. jakiś inny przykład, który będzie filtrował kategorie i produkty po zaznaczeniu radio i naciśnięciu buttona "Search"?

Ten post edytował marcus755 1.02.2013, 13:23:07

[fizzlebubble]

Proszę, submit jest niepotrzebny: http://jsbin.com/ukeyec/1/edit

[marcus755]

fajnie działa, bardzo jesteś blisko tego, o co mi chodziło, ale potrzebuję coś takiego jak podałeś w przykładzie, z tym że teraz jak klikam w radio w danej kategorii,
to znika mi zawartość z jakiejś kategorii po zaznaczeniu radio i nie mogę już zmienić w danej kategorii pozycji tej kategorii.
Chodziło mi o to, by:

Po wybraniu danej pozycji (zaznaczeniu radio) w kategorii
- nie blokowało mi się radio, tak że nie mogę zmienić na inne (tylko jedno) radio w danej kategorii
- aby samo zaznaczenie radio nie powodowało jeszcze akcji filtrowania, a dopiero kliknięcie buttona search wywoływało tę akcję

np. Wybieram sobie dowolne (oczywiście tylko jedno) radio z pierwszej kategorii, dowolne z drugiej kategorii, i trzecie,
klikam button search i dopiero wtedy, i w zależności, które pozycje (radio) w danej kategorii wybrałem, po tych mi się filtruje...
Czyli kliknięcie buttona search powoduje wywołanie funkcji, która sprawdza jakie radio było zaznaczone w pierwszej, drugiej i trzeciej kategorii,
i w zależności od tego daje efekt taki, że pokazują się divy z produktami powiązane z poszczególnymi kategoriami, tak jak ma to często miejsce w sklepach internetowych,
że mogę sobie przefiltrować produkt w zależności od kategorii, w jakich się znajdują...

jak to zrobić?

[fizzlebubble]

Jeśli chcesz abym Ci pomógł (teraz i następnym razem) to zawsze markup (html, css) wrzucaj mi na jsbin i w temacie podawaj link. W tej wklejcie co Ci wstawiłem popraw html tak aby dzialal jak chcesz i pokombinujemy coś z js'em.