Auto Complete selecionando os dados e montar em imputs

marcosmigueloliveira · Junho 30, 2015

Ola pessoal estou utilizando o plugin autocomplete do jquery, gostaria de quando clicar no item carregar em uma div abaixo com o codigo e outros dados da tabela e um link que vou enviar pelo get para outra pagina os dados. TEriam como me ajudar vejam o meu codigo:

Pagina que tem o input que busca as ferramentas e vou montar a div:

<?php
  session_start();
  include 'valida.php';
  include 'funcao_conexao.php';
  include 'variaveisDaSecao.php';

  //RECEBENDO DADOS DO USUARIO/LOCAL
  $usuario      =  $_POST["slc_usuario"];
  $local        =  $_POST["slc_local"];

  $CodGrad        =  $_POST["slc_graduacao"];
  $CodPerfil      =  $_POST["slc_acesso"];
  $CodEspec       =  $_POST["slc_especialidade"];
  $NGuerra        =  $_POST["txt_nguerra"];
  $Senha          =  $_POST["txt_senha"];
  $Celular        =  $_POST["txt_celular"];

  //RECEBENDO DADOS PELO GET
  $SaramGet         =  $_GET["acao"];
  $Saramre          =  $_GET["acao"];
  $SaramDel         =  $_GET["acaoDel"];


  //$chars = array("(",")","-"," ");
  //$SaramPost = str_replace($chars,"",$SaramPost); 
  //$SaramGet = str_replace($chars,"",$SaramGet); 

?>

<html>
  
  <head>
    <title>6º ETA - SINFO</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap-submenu.min.css">    
    <link rel="stylesheet" href="bootstrap-3.3.4-dist/css/submenu.css">  

    <script src="bootstrap-3.3.4-dist/js/jquery.min.js" type="text/javascript"></script>
    <script src="bootstrap-3.3.4-dist/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="bootstrap-3.3.4-dist/js/funcoes.js" type="text/javascript"></script>
    <script src="bootstrap-3.3.4-dist/js/bootstrap-submenu.min.js"></script>
 <!--links auto-completar-css -->
<script type="text/javascript" src="jquery-autocomplete/lib/jquery.js"></script>
<script type="text/javascript" src="jquery-autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="jquery-autocomplete/lib/jquery.ajaxQueue.js"></script>
<script type="text/javascript" src="jquery-autocomplete/lib/thickbox-compressed.js"></script>
<script type="text/javascript" src="jquery-autocomplete/jquery.autocomplete.js"></script>
<!--links auto-completar-js-->
<link rel="stylesheet" type="text/css" href="jquery-autocomplete/jquery.autocomplete.css"/>
<link rel="stylesheet" type="text/css" href="jquery-autocomplete/lib/thickbox.css"/>




<!--links auto-completar-js-->
  <link rel="stylesheet" href="../jquery/jquery-ui.css">
  <script src="../jquery/jquery-1.10.2.js"></script>
  <script src="../jquery/jquery-ui.js"></script>

 <!-- mascara do campo telefone-->

<script type="text/javascript">
//mascara saram
      /*function mascaraSaram(txt_saram){ 
         if(txt_saram.value.length == 6)
           txt_saram.value = txt_saram.value + '-'; //quando o campo já tiver 6 caracteres, o script irá inserir um tracinho, para melhor visualização do telefone.

      }*/
//mascara telefone
      function mascaraCelular(txt_celular){ 
         if(txt_celular.value.length == 0)
           txt_celular.value = '(' + txt_celular.value; //quando começamos a digitar, o script irá inserir um parênteses no começo do campo.
         if(txt_celular.value.length == 3)
            txt_celular.value = txt_celular.value + ') '; //quando o campo já tiver 2 caracteres (um parênteses e 2 números) o script irá inserir mais um parênteses, fechando assim o código de área.
       
       if(txt_celular.value.length == 9)
           txt_celular.value = txt_celular.value + '-'; //quando o campo já tiver 9 caracteres, o script irá inserir um tracinho, para melhor visualização do telefone.

      }

//somente numeros
      function SomenteNumero(e){
          var tecla=(window.event)?event.keyCode:e.which;   
          if((tecla>47 && tecla<58)) return true;
          else{
            if (tecla==8 || tecla==0) return true;
        else  return false;
          }
      }
//confirmacao exclusao
      function excluir_registro( e ){
        if( !confirm('Deseja realmente excluir este registro?') )
        {
          if( window.event)
            window.event.returnValue=false;
          else
            e.preventDefault();
        }
      }
//verificação de campos
    function validarCampos(){
      var usuario   = slc_usuario.value;
      var local     = slc_local.value;



      if  (usuario == 0){
        alert('O Campo Usuário não foi selecionado!');
        document.getElementById("slc_usuario").focus();
        document.getElementById("slc_usuario").style.backgroundColor='#FFD9D5';
        return(false);
      }

      if  (local == 0){
        alert('O Campo LOCAL DE MANUTENÇÃO não foi selecionado!');
        document.getElementById("slc_local").focus();
        document.getElementById("slc_local").style.backgroundColor='#FFD9D5';
        return(false);
      }                                 
    }

      // campos maiusculo
    function primeiramaiuscula(z){
      v=z.value.toUpperCase(1);
      z.value = v;


    }


    function maiusc(){
      var elemento = document.getElementById('txt_nguerra');

      if (value.length == 1){
       document.getElementById('txt_nguerra').value = elemento.toUpperCase();
      }
    }
</script>
    <style type="text/css">
      body {
        padding-top: 30px;
        padding-bottom: 20px;
      }
    </style>
        <script type="text/javascript">
            $().ready(function() {
                $("#course").autocomplete("autoCompleteFerramentas.php", {
                    width: 400,
                    matchContains: true,
                    //mustMatch: true,
                    //minChars: 0,
                    //multiple: true,
                    //highlight: false,
                    //multipleSeparator: ",",
                    selectFirst: false
                });
            });
        </script>
        <script type="text/javascript">
          function montarCampos(id){
            alert(id)



          }
        </script>        




  </head>
  
  <body>
    <?php
      include 'menu.php';
    ?>
    <div class="jumbotron">
      <div class="container">
        <h2>Saida de Ferramenta<br></h2>
          <?php
          $identificado = $_GET['identificado'];
          //montando os dados do usuario e local de manutenção que a ferramenta vai ser utilizada
          if ($identificado == 1) {
            $qrUserSel  = mysql_query("SELECT * FROM tb_usuario  AS u INNER JOIN tb_graduacao  g ON u.UsCodGrad =  g.GrCodigo WHERE u.UsSaram = '$usuario'");
            $UserIdent  = mysql_fetch_assoc($qrUserSel);
            $SaramIdent = $UserIdent['UsSaram'];
            $NomeIdent  = $UserIdent['UsNGuerra'];
            $GradIdent  = $UserIdent['GrNome'];
            //montando dados do local
            $qrLocalSel  = mysql_query("SELECT * FROM tb_local_manutencao  AS l WHERE l.LmCodigo = '$local'");
            $localIdent  = mysql_fetch_assoc($qrLocalSel);    
            $local = $localIdent['LmNome'];

            echo  ' <p class="text-danger">Nome: '.$GradIdent." ".$NomeIdent.'</p>';
            echo  ' <p class="text-info">Local: '.$local.'</p>';
            echo  '<a  class="btn btn-info" href="listarFerramentas.php">Voltar</a>';


          } else { 
         echo ' <form class="form-inline" action="listarFerramentas.php?identificado=1" method="POST">
          <fieldset>
            <!-- Select Basic -->
            <div class="form-group">
              <label class="col-md-8 control-label" for="slc_usuario">Usuário:</label>
              <div class="col-md-4">
                <select id="slc_usuario" name="slc_usuario" class="form-control">
                  
                  <option value="0">Selecione ...</option>';
            $queryUsuario =  mysql_query("SELECT * FROM tb_usuario  AS u INNER JOIN tb_graduacao  g ON u.UsCodGrad =  g.GrCodigo");
            while ( $rowUsuario = mysql_fetch_array($queryUsuario)) {
             echo '<option value="'.$rowUsuario['UsSaram'].'">'.$rowUsuario['GrNome']." ".$rowUsuario['UsNGuerra'].'</option>';
                     }
            echo '
                </select>
              </div>
            </div>   <br><br>
          <!-- Select Basic -->
            <div class="form-group">
              <label class="col-md-6 control-label" for="slc_local">Local Manutenção:</label>
              <div class="col-md-6">
                <select id="slc_local" name="slc_local" class="form-control">    
                  <option value="0">Selecione ...</option>';
                    $queryLocal =  mysql_query("SELECT * FROM tb_local_manutencao ");
                     while ( $rowLocal = mysql_fetch_array($queryLocal)) {
                      echo '<option value="'.$rowLocal['LmCodigo'].'">'.$rowLocal['LmNome'].'</option>';
                     }
                  
              echo '
                    </select>
                  </div>
                </div>            
            <br><br>
            <button id="btn_enviar" name="btn_enviar" class="btn btn-info" type="submit" onclick="return validarCampos();">Enviar</button>
            
                </fieldset>
              </form>   
              ';
          }
            ?>
          </div>
      </div>
    </div>
    <div class="container">
       <div class="row">
        <div class="zero-clipboard">
          <span class="btn-clipboard"><b>Escolha a Ferramenta:</b></span>
        </div>
        <div class="panel panel-danger">
          <div class="panel-body">  
            <form autocomplete="off" class="form-inline" action="listarFerramentas.php?identificado=1" method="POST">
              <div class="form-group">
                <label class="col-md-6 control-label" for="lbl_pesquisa_ferramenta">Digite o Nome</label>
                <div class="col-md-4">
                    <input class="form-control input-md" type="text" name="course" id="course" onChange="montarCampos(this.value)"/>
                </div><br>
                <div class="col-md-4">Codigo
                    <input class="form-control input-md" type="text" name="codigo" id="codigo" />
                </div><br><br><br><br><br>
                <div class="col-md-4">Sn
                    <input class="form-control input-md" type="text" name="codigo" id="codigo" />
                </div>                                
              </div>     
            </form>
          </div>
        </div>


        <div class="table-responsive">
          <table class="table table-hover">
          <tr>
            <th>Pn/Sn</th>
            <th>Nome</th>
            <th>Quantidade</th>
            <th>Adicionar</th>
          </tr>
        </table>
      </div>

      <footer>
        <p>©  Esquadrão Guará - Seção de Informática  2015</p>
      </footer>
    </div>
    <!-- /container -->
  </body>

</html>

pagina que pego os dados para o autocomplete

<?php
  include 'funcao_conexao.php';

 
$q = strtolower($_GET["q"]);
if (!$q) return;
 
$sql = "SELECT * FROM tb_ferramenta WHERE FrNome LIKE '%$q%'";
$rsd = mysql_query($sql);
while($rs = mysql_fetch_array($rsd)) {
	$ccod  = $rs['FrCodigo'];
	$cname = utf8_encode($rs['FrNome']);
	$csn   = utf8_encode($rs['FrSn']);
	echo "$ccod - "."$cname"." - $csn\n";
}
?>

DE ante mao ja agradeco

William Bruno · Junho 30, 2015

Exemplo:

http://wbruno.com.br/ajax/input-preenche-formulario-ajax/

Entrar

Arquivado

Auto Complete selecionando os dados e montar em imputs

Recommended Posts

marcosmigueloliveira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante