Buscador Jquery

publicado por: Anonymous

Buenos días, tengo este tipo de tabla,

 <table id="table" class="table table-hover">
                <thead>
                    <tr>
                        <th style="text-align:left;">Titulo del documento</th>
                        <th style="text-align:left;">Acronimo Proyecto</th>
                        <th style="text-align:left;">Estado</th>
                        <th style="text-align:left;">Idioma</th>
                        <th style="text-align:left;">Nº del documento</th>
                        <th style="text-align:left;">Versión</th>
                        <th style="text-align:left;">Revisión</th>
                        <th style="text-align:left;">Descripción</th>
                        <th style="text-align:left;">Fecha</th>
                        <th style="text-align:left;">Acronimo Subcategoria</th>
                        <th style="text-align:left;">Confidencialidad</th>
                        <th style="text-align:left;">Tipo de documento</th>
                        <th style="text-align:left;">Usuario</th>
                        <th style="text-align:left;">Aprobado por</th>
                        <th style="text-align:left;">Autorizado por</th>
                        <th style="text-align:left;">Revisor</th>
                        <th style="text-align:left;">Compañia</th>
                        <th style="text-align:left;">Codigo proyecto</th>
                        <th style="text-align:left;">Edición</th>
                        <th style="text-align:left;">Eliminar</th>

                    </tr>
                </thead>
                                        <tr>
                        <td>Prueba 1</td>
                        <td>ACR</td>
                        <td>Aprobado</td>
                        <td></td>
                        <td>12</td>
                        <td>1</td>
                        <td>1</td>
                        <td>Prueba</td>
                        <td>2017-05-09</td>
                        <td>COR</td>
                        <td>E</td>
                        <td>RPT</td>
                        <td>ACD</td>
                        <td>ACD</td>
                        <td>ACD</td>
                        <td>ACD</td>
                        <td>DAU</td>
                        <td>Prueba 1-RPT-DAU-COR-ACR-2017-</td>
 </table>

En la que muestra resultados obtenidos de un Select * de una BBDD.
Quiero añadirle un buscador con Jquery para que quede totalmente dinamico, pero a la hora de añadirselo estaba buscando por el foro y “supuestamente” seria como un codigo generico, y la verdad que de Jquery no entiendo casi nada.
Seria este.

<script>
$("#search").keyup(function () {
            _this = this;
            // Show only matching TR, hide rest of them
            $.each($("#table tbody tr"), function () {
                if ($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
                    $(this).hide();
                else
                    $(this).show();
            });
        });
</script>

Pero a la hora de probar el buscador no funciona

El buscador lo tengo fuera de la tabla, digo esto por qeu no se si es correcto.

<input type="text" id="search" placeholder="Type to search..." />

P.D. la libreria Jquery esta bien insertada ya que tengo otra opción diseñada en Jquery que genera un codigo automaticamente en otor input pero los “ID” no son los mismos.

Aun asi, este codigo no creo que le este generando conflictos no?

$(document).ready(function () {
            $('#titulo_documento, #compania1, #acro_subcategoria, #acro_proyecto, #fecha, #idioma, #acro_documento, #proyecto, #estado, #num_documento, n
    #version, #revision, #descripcion, #confidencialidad, #acro_usuario1, #aprobado_por1, #autorizado_por1, #revisor1').blur(function () {
                $('#codigo_proyecto').val($('#titulo_documento').val() + "-" + $('#acro_documento').val() + "-" + $('#compania1').val() + "-" + $('#acro_subcategoria').val() + "-" + $('#acro_proyecto').val() + "-" + $('#fecha').val() + "-(" + $('#idioma').val() + ")");
            });
        });
        function change_documento()
        {
            var acro_documento = $("#acro_documento").val();

            $.ajax({
                type: "POST",
                url: "subcategoria.php",
                data: "acro_documento=" + acro_documento,
                cache: false,
                success: function (response)
                {
                    //alert(response);return false;
                    $("#acro_subcategoria").html(response);
                }
            });

        }

solución

Si te fijas en esta línea del jQuery:

$.each($("#table tbody tr"), function () {
//               ^^^^^

Estás utilizando un selector que no existe en tu estructura html. Tienes el elemento table con id #table , dentro un elemento thead y seguido tu elemento tr.

Posible solución: quita el selector tbody en la linea de jQuery o añade el elemento tbody en tu estructura HTML de tal manera que el segundo tr quede dentro de este.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *