Perdón por preguntar, probablemente me estoy perdiendo algo pequeño aquí, pero no tengo ni idea. Generé dinámicamente una larga lista de botones de radio usando PHP. En la parte superior de la lista hay una entrada HTML para buscar en la lista usando jQuery. Esto funciona, excepto por un pequeño detalle. Siempre se muestra el primer botón de opción de la lista, independientemente del resultado de la búsqueda. Incluso si escribo algo completamente diferente, siempre veré el primer botón de opción en la lista junto con los resultados coincidentes.
¿Qué está fallando aquí?
Esta es mi lista de botones de radio generada dinámicamente, usando HTML y PHP:
<input id="addplantSearch" class="form-control" type="text" name="addplantsearch" placeholder="Zoek op (Latijnse) naam..." style="margin:0; height:48px;"> <!-- Search input --> <?php $query = "SELECT * FROM plants ORDER BY plants.name ASC;"; $post_data = $data->execute($query); // Prepared statement in 'execute' method (Database class) ?> <div class="addplant-list"> <?php foreach ($post_data as $post) { # Loop start ?> <div class="searchable"> <label class="pselect-container"> <?php echo $post['name']; ?> <input type="radio" name="selectPlant" value="<?php echo $post['plant_id']; ?>"> <span class="pselect-checkmark" style="width:100%;"> <img src="../system/src/img/plants/<?php echo $post['directory']; ?>/icon.png" /> <?php echo $post['name'] . " - (" . $post['name_latin'] . ")"; ?> </span> </label> </div> <?php # Loop end } ?> </div>Y este es mi jQuery, responsable de buscar en la lista:
$("#addplantSearch").keyup(function() { var value = this.value; $(".addplant-list").find(".searchable").each(function(index) { if (!index) return; var id = $(this).find("span").first().text(); $(this).toggle(id.indexOf(value) !== -1); }); }); EDITAR: El primer elemento de la lista está determinado por el orden alfabético (ASC) de los resultados de mi base de datos (consulte la variable $query ). Así que este es siempre el mismo elemento en orden alfabético.
Parece que su problema es con su declaración if .
if (!index) return; Este problema se produce porque JavaScript utiliza matrices basadas en 0 y 0 también es un valor falso. Sentido:
!0 === truey el primer elemento de la matriz siempre saldrá de la función y no será aplicable a la lógica de alternancia.
Entonces, probablemente muchas formas de evitar esto, una sería verificar la longitud de la matriz antes de each función. Ex:
$("#addplantSearch").keyup(function() { var value = this.value; var searchableItems = $(".addplant-list").find(".searchable"); if (searchableItems.length) { searchableItems.each(function(index) { var id = $(this).find("span").first().text(); $(this).toggle(id.indexOf(value) !== -1); }); } });