filtro de busqueda

[sajijopa]

Hola buen día, soy nueva en esto y quiero aprender, estoy haciendo una pagina con un filtro de búsqueda pero no se hacerlo funcionar, alguien que me pueda ayudar pos.

mi código es este:


<form class="form-horizontal" action="" method="get">
<fieldset>
<legend>B&uacute;squeda:</legend>
<div class="control-group row">
<div class="control span4">
<label class="control-label" for="field_1">Raza</label>
<div class="controls">
<select id="field_1" class="last span2" name="field_1">
<option selected="selected" value="0">Todos</option>
<option class="level-0" value="lusitano">Lusitano</option>
<option class="level-0" value="espanol">Espa&ntilde;ol</option>
<option class="level-0" value="azteca">Aztecas</option>

</select>
</div>
</div>
<div class="control span4">
<label class="control-label" for="field_2">Sexo</label>
<div class="controls">
<select id="field_2" class="last span2" name="field_2">
<option selected="selected" value="0">Todos</option>
<option class="level-0" value="macho">Macho</option>
<option class="level-0" value="hembra">Hembra</option>
<option class="level-0" value="capado">Capado</option>
<option class="level-0" value="yegua">Yegua Reproductora</option>
<option class="level-0" value="garanon">Garañon</option>

</select>
</div>
</div>
<div class="control span4">
<label class="control-label" for="field_3">Edad</label>
<div class="controls">
<select id="field_3" class="last span2" name="field_3">
<option selected="selected" value="0">Todos</option>
<option class="level-0" value="meses">6 meses a 1 a&ntilde;o</option>
<option class="level-0" value="1año">1 a&ntilde;o a 3 a&ntilde;os</option>
<option class="level-0" value="4años">4 a&ntilde;os a 8 a&ntilde;os</option>
<option class="level-0" value="9años">9 a&ntilde;os a 12 a&ntilde;os</option>
<option class="level-0" value="12años">12 a&ntilde;os a 16 a&ntilde;os</option>
<option class="level-0" value="masde16"> mas de 16</option>

</select>
</div>
</div>
<div class="control span4">
<label class="control-label" for="field_4">Altura</label>
<div class="controls">
<select id="field_4" class="last span2" name="field_4">
<option selected="selected" value="0">Todos</option>

<option class="level-0" value="1.45">1.45-1.50</option>
<option class="level-0" value="1.51">1.51-1.55</option>
<option class="level-0" value="1.56">1.56-1.60</option>
<option class="level-0" value="1.61">1.61-1.65</option>
<option class="level-0" value="1.66">1.66-1.70</option>


</select>
</div>
</div>
<div class="control span4">
<label class="control-label" for="field_5">Disciplina</label>
<div class="controls">
<select id="field_5" class="last span2" name="field_5">
<option selected="selected" value="0">Todos</option>
<option class="level-0" value="adiestramiento">Adiestramiento</option>
<option class="level-0" value="salto">Salto</option>
<option class="level-0" value="toreo">Toreo</option>
<option class="level-0" value="equitacion">Equitacion</option>
<option class="level-0" value="paseo">Paseo</option>
<option class="level-0" value="altaescuela">Alta Escuela</option>
<option class="level-0" value="aile">Baile</option>
</select>
</div>
</div>
<div class="control span4">
<label class="control-label" for="field_8">Capa</label>
<div class="controls">
<select id="field_8" class="last span2" name="field_8">
<option selected="selected" value="0">Todos</option>

<option class="level-0" value="tordillo">Tordillo</option>
<option class="level-0" value="casta">Casta&ntilde;o</option>
<option class="level-0" value="ballo">Ballo</option>
<option class="level-0" value="alazan">Alazan</option>
<option class="level-0" value="negro">Negro</option>
<option class="level-0" value="isabel">Isabel</option>
<option class="level-0" value="palomino">Palomino</option>
<option class="level-0" value="grullo">Grullo</option>
<option class="level-0" value="caramelo">Caramelo</option>
</select>
</div>
<div class="control span4">
<label class="control-label" for="field_6">Pais</label>
<div class="controls">
<select id="field_6" class="last span2" name="field_6">
<option selected="selected" value="0">Todos</option>
<option class="level-0" value="alaska">Alaska</option>
<option class="level-0" value="canada">Canada</option>
<option class="level-0" value="eu">EEUU</option>
<option class="level-0" value="mexico">Mexico</option>
<option class="level-0" value="brasil">Brasil</option>
<option class="level-0" value="argentina">Agentina</option>
<option class="level-0" value="peru">Peru</option>
<option class="level-0" value="colombia">Colombia</option>
<option class="level-0" value="bolivia">Bolivia</option>
<option class="level-0" value="venezuela">Venezuela</option>
<option class="level-0" value="chile">Chile</option>
<option class="level-0" value="paraguay">Paraguay</option>
<option class="level-0" value="ecuador">Ecuador</option>
<option class="level-0" value="guyana">Guyana</option>
<option class="level-0" value="uruguay">Uruguay</option>

<option class="level-0" value="surinam">Surinam</option>
<option class="level-0" value="nicaragua">Nicaragua</option>
<option class="level-0" value="honduras">Honduras</option>
<option class="level-0" value="uba">Cuba</option>
<option class="level-0" value="guatemala">Guatemala</option>
<option class="level-0" value="panama">Panama</option>
<option class="level-0" value="costa">Costa Rica</option>
<option class="level-0" value="dominicana">Republica Dominicana</option>
<option class="level-0" value="haiti">Haiti</option>
<option class="level-0" value="belice">Belice</option>
<option class="level-0" value="salvador">El Salvador</option>
<option class="level-0" value="bahamas">Bahamas</option>
<option class="level-0" value="jamaica">Jamaica</option>
<option class="level-0" value="dominica">Dominica</option>

</select>
</div>
</div>
<div class="control span4">


</div>

</div>
<div class="span8">

</div>
<div class="span2 offset2">
<button class="btn btn-success" name="submit" type="submit">
<i class="icon-search icon-white"></i>
Buscar
</button>

<script>var search = document.getElementById("submit"),
food = document.getElementsByTagName("level-0"),
forEach = Array.prototype.forEach;

search.addEventListener("keyup", function(e){
var choice = this.value;

forEach.call(food, function(f){
if (f.innerHTML.toLowerCase().search(choice.toLowerCa se()) == -1)
f.parentNode.style.display = "none";
else
f.parentNode.style.display = "block";
});
}, false);</script>
</div>

</div>
</fieldset>
</form>