Exemplo de Filtros de Busca

Bruno.Oliveira · Mensagem por **Bruno.Oliveira** » 17/Jun/2019, 18:42

Basta criar um arquivo de template com codigo abaixo.
Deve preservar o nome dos objetos

Logo abaixo do Title do html deve chamar a função smarty. {imprime_js_xajax}

Exemplo 1: (usando combobox)

Código: Selecionar todos

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
{imprime_js_xajax}
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  Operação :
  <select name="operacao" id="operacao" onChange="xajax_cbUF('imovel_uf', document.getElementById('operacao').value)">
    <option value="-">-</option>
    <option value="ALUGUEL">ALUGUEL</option>
    <option value="VENDAS">VENDAS</option>
  </select>
 
<br />
Estado :
  <select name="imovel_uf" id="imovel_uf" onChange="xajax_cbCidades('imovel_cidade', document.getElementById('operacao').value, document.getElementById('imovel_uf').value)">
    <option value="x">x</option>
  </select>

<br />
Cidade :
  <select name="imovel_cidade" id="imovel_cidade" onChange="xajax_cbBairros('imovel_bairro', document.getElementById('operacao').value, document.getElementById('imovel_uf').value, document.getElementById('imovel_cidade').value)" />
    <option value="x">x</option>
  </select>

<br />
Bairros :
  <select name="imovel_bairro" id="imovel_bairro">
    <option value="x">x</option>
  </select>
</form>
</body>
</html>

Exemplo 1: (usando checkbox)

Código: Selecionar todos

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css" />
.divBairroSelecionadoSmarty {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    width:auto;
    display:block;
    height:19px;
    line-height:19px;
    vertical-align:text-top;
    margin-top:1px;
    background-color:#009999;
    color:#FFFFFF;
    cursor:pointer;
    overflow:hidden;
}
.divBairrosCheckBoxInputSmarty{
    float:left;
    margin:2px 0px 0px 2px;*margin:-2px 0px 0px 0px;
}

.divBairrosNenhumEncontradoSmarty {
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #333333;
}

.divListaBairrosSmarty{
    overflow:auto;
    width:auto;
    height:90px;
    border:1px solid #CCCCCC;
    padding-left:5px;
    background-color: #FFFFFF;
    text-align: left;
}


.divBairroNaoSelecionadoSmarty {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    width:auto;
    display:block;
    height:19px;
    line-height:19px;
    vertical-align:text-top;
    margin-top:1px;
    background-color:none;
    color:#000000;
    cursor:pointer;
    overflow:hidden;
}
</style>


{imprime_js_xajax}
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  Operação :
  <select name="operacao" id="operacao" onChange="xajax_cbUF('imovel_uf', document.getElementById('operacao').value)">
    <option value="-">-</option>
    <option value="ALUGUEL">ALUGUEL</option>
    <option value="VENDAS">VENDAS</option>
  </select>
 
<br />
Estado :
  <select name="imovel_uf" id="imovel_uf" onChange="xajax_cbCidades('imovel_cidade', document.getElementById('operacao').value, document.getElementById('imovel_uf').value)">
    <option value="x">x</option>
  </select>

<br />
Cidade :
  <select name="imovel_cidade" id="imovel_cidade" onChange="xajax_cbBairros('imovel_bairros_chk', document.getElementById('operacao').value, document.getElementById('imovel_uf').value, document.getElementById('imovel_cidade').value, '', 'divListaBairrosSmarty', 'divBairrosCheckBoxInputSmarty', 'divBairrosNenhumEncontradoSmarty', 'divBairroNaoSelecionadoSmarty', 'divBairroSelecionadoSmarty', false, '    ( ', ' )', '', '')" />
    <option value="x">x</option>
  </select>

<br />
Bairros :
<div class="divListaBairrosSmarty" id="imovel_bairros_chk">xxxxx</div>


</form>
</body>
</html>

Código: Selecionar todos

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
{imprime_js_xajax}
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <label for="cbOperacao"></label>
  <select name="cbOperacao" id="cbOperacao" onChange="xajax_cbCidades('cbCidade', document.getElementById('cbOperacao').value, '', 'cbTipo|Sim|Sim|Nao,cbBairro|Sim|Sim|Nao', 'imovel_bairros_chk|deu certoooo')" >
    <option value="ALUGUEL">ALUGUEL</option>
    <option value="VENDAS">VENDAS</option>
  </select>
 
 
  <select name="cbCidade" id="cbCidade" onchange="xajax_cbImoveisTipos('cbTipo', document.getElementById('cbOperacao').value, '', document.getElementById('cbCidade').value, '')" >
    <option value="xxx">xx</option>
  </select>
  <select name="cbTipo" id="cbTipo" onchange="xajax_cbBairros('cbBairro', document.getElementById('cbOperacao').value, '', document.getElementById('cbCidade').value, document.getElementById('cbTipo').value)" >
    <option value="xxx">xx</option>
  </select>
  <select name="cbBairro" id="cbBairro">
    <option value="xxx">xx</option>
  </select>
 
  <div class="divListaBairrosSmarty" id="imovel_bairros_chk">div a ser limpo</div>
 
</form>
</body>
</html>