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]

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.