Quick search with jquery

Question

Quick search with jquery

Asked 9 years, 5 months ago

Viewed 1,189 times

1

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

CODIGO 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>
<script type="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>
<div class="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>

Can you put all the HTML you have? and the ajax code too... The question is incomplete, difficult to understand the structure and how to parse data to the server side.

– Sergio

2015/06/19 at 12:48
This all updated, what involves the project are just these files.

– Renan Rodrigues

2015/06/19 at 13:13

1 answer

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.

by Malaba • **219** points · Answer 1 · 2015-12-03T14:16:26+00:00

Change the scope of 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');
        });
    }
});