Quick search with jquery

Question

Quick search with jquery

Navigation

#1 by (1 votes)

1

I am trying to do a quick search on the page, but it is giving error, it hides all the fields and even if I type something that has in the table it does not appear.

CODE JS.

$(function(){
    $("#pesquisa").keyup(function(){
        //pega o css da tabela 
        var tabela = $(this).attr('alt');
        if( $(this).val() != ""){
            $("."+tabela+" tbody>tr").hide();
            $("."+tabela+" td:contains-ci('" + $(this).val() + "')").parent("tr").show();
        } else{
            $("."+tabela+" tbody>tr").show();
        }
    }); 
});

TABLE CODE

<?php

// incluindo o arquivo que faz a conexao com o banco
include ("../includes/conexao.php");
include "../includes/suc_validacao.php";


// executa  query de consulta e armazena o resultado devolvido na variável $resultado
$resultado = mysql_query("SELECT COD_IDENT_CLIEN, TXT_NOMEX_CLIEN, FLG_TIPOX_CLIEN from tbl_CLIENTES");

// se não existir cargos cadastrados exibe uma mensagem
if(mysql_num_rows($resultado)<=0)
{
    echo "<div class='alert alert-error'>";
    echo "<b>Atenção!</b><br>";
    echo "Não existe clientes cadastrada no momento.";
    echo "</div>";
}

// se existir produtos cadastrados lista-os
else
{
    echo "<table class='lista-clientes table table-striped'>";
    echo "<thead>";
    echo "<th>Nome do Cliente</th>";
    echo "<th>Tipo de Cliente</th>";
    echo "<th>Excluir</th>";
    echo "<th>Alterar</th>";
    echo "</thead>";

    while($linha = mysql_fetch_array($resultado))
    {
        echo "<tr>";
        echo "<td>$linha[1]</td>";
        switch ($linha[2]) {
            case 'F':
                echo "<td>Pessoa Fisica</td>";
                break;

            case 'J':
                echo "<td>Pessoa Juridica</td>";
                break;

            default:
                echo "<td>Não cadastrado</td>";
                break;
        }
    echo "<td><a href='C_DeletaCliente.php?P_COD_IDENT_CLIEN={$linha[0]}&P_FLG_TIPOX_CLIEN={$linha[2]}'><i class='icon-remove' ></i></a></td>";
    echo "<td><a href='alteraCliente.php?P_COD_IDENT_CLIEN={$linha[0]}'><i class='icon-pencil' ></i></a></td>";
    echo "</tr>";
    }

    echo "</table>";
}
mysql_close($conn);

? >

INDEX

    <?php
  include "../includes/conexao.php";
  include "../includes/suc_validacao.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Josino Ribeiro - Comunicação</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600"
        rel="stylesheet">
<link href="../css/font-awesome.css" rel="stylesheet">
<link href="../css/style.css" rel="stylesheet">
<link href="../css/pages/dashboard.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script><scripttype="text/javascript" src="../js/jquery.quick.search.js"></script>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head><body><divclass="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span
                    class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </a><a class="brand" href="index.html">Painel Administrativo JR Comunicação </a>
      <div class="nav-collapse">
        <ul class="nav pull-right">
          <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
                            class="icon-user"></i> <?php echo $_SESSION['UsuarioNome']; ?> <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="javascript:;">Perfil</a></li>
              <li><a href="logout.php">Sair</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-search pull-right">
          <input type="text" class="search-query" placeholder="Pesquisar">
        </form>
      </div>
      <!--/.nav-collapse --> 
    </div>
    <!-- /container --> 
  </div>
  <!-- /navbar-inner --> 
</div>
<!-- /navbar -->
<div class="subnavbar">
  <div class="subnavbar-inner">
    <div class="container">
        <?php include "../includes/menu.php" ?>
    </div>
    <!-- /container --> 
  </div>
  <!-- /subnavbar-inner --> 
</div>
<!-- /subnavbar -->
<div class="main">
  <div class="main-inner">
    <div class="container">
      <div class="row">
        <div class="span12">
          <div class="widget widget-nopad">
              <legend>Clientes</legend>
              <!-- Search input-->
              <input id="pesquisa" name="pesquisa" type="text" alt="lista-clientes" placeholder="Pesquisar" class="search-query">

              <button id="btNovo" class="btn btn-default" data-toggle="modal" data-target="#myModal"><a href="cadastroPublicacao.php"><i class="icon-plus-sign"></i> Novo</a></button>
                <?php include "C_ListaClientes.php" ?>

                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">Cadastrar cliente</h4>
                      </div>
                      <div class="modal-body" align="center">
                        <button id="btNovo" class="btn btn-default"><a href="cadastroPF.php"><i class="icon-plus-sign"></i> Pessoa Física</a></button>
                        <button id="btNovo" class="btn btn-default"><a href="cadastroPJ.php"><i class="icon-plus-sign"></i> Pessoa Jurídica</a></button>
                      </div>
                    </div>
                  </div>
                </div>

          </div>
          <!-- /widget --> 
        </div>
        <!-- /span12 -->
      </div>
      <!-- /row --> 
    </div>
    <!-- /container --> 
  </div>
  <!-- /main-inner --> 
</div>
<!-- /main -->
<div class="footer">
  <div class="footer-inner">
    <div class="container">
      <div class="row">
        <div class="span12"> &copy; 2015 <a href="http://www.hotsystems.com.br/">HotSystems</a>. </div>
        <!-- /span12 --> 
      </div>
      <!-- /row --> 
    </div>
    <!-- /container --> 
  </div>
  <!-- /footer-inner --> 
</div>
<!-- /footer --> 
<!-- Le javascript
================================================== --> 
<!-- Placed at the end of the document so the pages load faster --> 
<script src="../js/jquery-1.7.2.min.js"></script> 
<script src="../js/excanvas.min.js"></script> 
<script src="../js/chart.min.js" type="text/javascript"></script> 
<script src="../js/bootstrap.js"></script>
<script language="javascript" type="text/javascript" src="../js/full-calendar/fullcalendar.min.js"></script>
<script src="../js/base.js"></script> 
</body>
</html>

jquery

asked by anonymous 19.06.2015 / 14:42

1 answer

Return value Ajax in input Difference between get_context_data and get_queryset and code improvement (Django)

score 1 · Accepted Answer

Change the scope of the event keyup by the code below:

$('#pesquisa').keyup(function(event) {
    if (event.keyCode == 27 || $(this).val() == '') {
        $(this).val('');
        $('tbody tr').removeClass('visible').show().addClass('visible');
    } else {

        query = $.trim($(this).val()); //remove espaços em branco
        query = query.replace(/ /gi, '|'); //adiciona OR for regex query

        // Itera sobre cada linha de sua tabela
        $('tbody tr').each(function() {

            // Verifica se alguma coluna da linha corrente possui a informação, caso não possua a linha é ocultada
            ($(this).text().search(new RegExp(query, "i")) < 0) ? $(this).hide().removeClass('visible'): $(this).show().addClass('visible');
        });
    }
});