Jquery search engine

0

Good morning, I have this kind of board,

 <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>

In which it shows results obtained from a Select * of a BBDD. I want to add a search engine with Jquery to be totally dynamic, but at the time of adding it I was looking for the forum and "supposedly" would be like a generic code, and the truth of Jquery I understand almost nothing. It would be this.

<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>

But when it comes to testing the search engine does not work

The search engine I have it out of the table, I say this because I do not know if it is correct.

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

P.D. Jquery library is well inserted since I have another option designed in Jquery that generates a code automatically in otor input but the "ID" are not the same.

Even so, this code does not think it is generating conflicts, 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);
                }
            });

        }
    
asked by Alberto Cepero de Andrés 11.05.2017 в 09:10
source

2 answers

2

If you look at this line of jQuery:

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

You are using a selector that does not exist in your html structure. You have the element table with id #table , inside an element thead and followed your element tr .

Possible solution: remove the tbody selector in the jQuery line or add the tbody element in your HTML structure so that the second tr stays within it.

    
answered by 11.05.2017 / 09:22
source
2

The code works, at least in some browsers.

To make sure it works in any browser, add the tbody tag you use in the selector.

Here is the working example:

$("#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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" placeholder="Type to search..." />
<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>
  <tbody>
    <tr>
      <td>Título Buscar</td>
      <td>Proyecto Buscar</td>
      <td>Estado Buscar</td>
      <td>Idioma Buscar</td>
      <td>Num Doc Buscar</td>
      <td>Versión Buscar</td>
      <td>Revisión Buscar</td>
      <td>Descripción Buscar</td>
      <td>Fecha Buscar</td>
      <td>Subcategoría Buscar</td>
      <td>Confidencialidad Buscar</td>
      <td>Tipo Doc Buscar</td>
      <td>Acro Usuario Buscar</td>
      <td>Aprobado Buscar</td>
      <td>Autorizado Buscar</td>
      <td>Revisor Buscar</td>
      <td>Compañía Buscar</td>
      <td>Cod Proyecto Buscar</td>
      <td>
        <a href="?action=editar&id=1&id1=1&id2=1&id3=1"><img src="icon_editthis.png" width="30px" height="30px" /></a>
      </td>
      <td>
        <a href="?action=eliminar&titulo_documento=1&num_documento=1&version=1&revision=1"><img src="delete.png" width="30px" height="30px" /></a>
      </td>
    </tr>
    <tr>
      <td>Título Otro texto</td>
      <td>Proyecto Otro texto</td>
      <td>Estado Otro texto</td>
      <td>Idioma Otro texto</td>
      <td>Num Doc Otro texto</td>
      <td>Versión Otro texto</td>
      <td>Revisión Otro texto</td>
      <td>Descripción Otro texto</td>
      <td>Fecha Otro texto</td>
      <td>Subcategoría Otro texto</td>
      <td>Confidencialidad Otro texto</td>
      <td>Tipo Doc Otro texto</td>
      <td>Acro Usuario Otro texto</td>
      <td>Aprobado Otro texto</td>
      <td>Autorizado Otro texto</td>
      <td>Revisor Otro texto</td>
      <td>Compañía Otro texto</td>
      <td>Cod Proyecto Otro texto</td>
      <td>
        <a href="?action=editar&id=2&id1=2&id2=2&id3=2"><img src="icon_editthis.png" width="30px" height="30px" /></a>
      </td>
      <td>
        <a href="?action=eliminar&titulo_documento=2&num_documento=2&version=2&revision=2"><img src="delete.png" width="30px" height="30px" /></a>
      </td>
    </tr>
    <tr>
      <td>Título Texto busqueda</td>
      <td>Proyecto Texto busqueda</td>
      <td>Estado Texto busqueda</td>
      <td>Idioma Texto busqueda</td>
      <td>Num Doc Texto busqueda</td>
      <td>Versión Texto busqueda</td>
      <td>Revisión Texto busqueda</td>
      <td>Descripción Texto busqueda</td>
      <td>Fecha Texto busqueda</td>
      <td>Subcategoría Texto busqueda</td>
      <td>Confidencialidad Texto busqueda</td>
      <td>Tipo Doc Texto busqueda</td>
      <td>Acro Usuario Texto busqueda</td>
      <td>Aprobado Texto busqueda</td>
      <td>Autorizado Texto busqueda</td>
      <td>Revisor Texto busqueda</td>
      <td>Compañía Texto busqueda</td>
      <td>Cod Proyecto Texto busqueda</td>
      <td>
        <a href="?action=editar&id=13&id1=13&id2=13&id3=13"><img src="icon_editthis.png" width="30px" height="30px" /></a>
      </td>
      <td>
        <a href="?action=eliminar&titulo_documento=13&num_documento=13&version=13&revision=13"><img src="delete.png" width="30px" height="30px" /></a>
      </td>
    </tr>
  </tbody>
</table>
    
answered by 11.05.2017 в 09:25