Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

7master

Autocomplete em vários inputs

Recommended Posts

Olá pessoal, tudo bem?

 

Estou precisando de uma ajuda. Sou iniciante na linguagem e surgiu uma dúvida.

 

Tenho um formulário que os inputs são criado dinamicamente e um desses inputs tem o campo com o id="origem" e id="destino" onde faço um autocomplete me conectando ao banco de dados mysql. 

Até ai tudo bem, porém só funciona no primeiro input, queria uma díca de como fazer funcionar em todos os inputs.

 

Pagina Html

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="utf-8"/>
	<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
	<title>Título da Página (Estrutura básica de uma página com HTML 5)</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
        <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css">
        <script src="js/func.js"></script>  
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/blitzer/jquery-ui.css" type="text/css" />
        <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <link rel="stylesheet" href="css/bootstrap.min.css">		
        <link href="css/solicitacoes.css" rel="stylesheet">        
        <link href="css/painel.css" rel="stylesheet">	
</head>
<body>
 <input style="text-transform:uppercase" class="form-control cidade required"    id="origem" name="trecho[0][cidade_origem]" type="text" required/>
 <input style="text-transform:uppercase" class="form-control cidade required"    id="origem" name="trecho[1][cidade_origem]" type="text" required/>
 <input style="text-transform:uppercase" class="form-control cidade required"    id="origem" name="trecho[2][cidade_origem]" type="text" required/>
 <input style="text-transform:uppercase" class="form-control cidade required"    id="origem" name="trecho[3][cidade_origem]" type="text" required/>
 
 
 <script src="js/jquery-1.6.2.min.js"></script>
 <script src="js/jquery-ui.js"
  integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
  crossorigin="anonymous"></script>
 <script type="text/javascript" src="js/busca_cidades.js"></script>;
  
</body>
</html>

Pagina js

$(function() {
    
    // Atribui evento e função para limpeza dos campos
    $('#origem').on('input', limpaCampos);

    // Dispara o Autocomplete a partir do segundo caracter
    $( "#origem" ).autocomplete({
	    minLength: 2,
	    source: function( request, response ) {
	        $.ajax({
	            url: "consulta.php",
	            dataType: "json",
	            data: {
	            	acao: 'autocomplete',
	                parametro: $('#origem').val()
	            },
	            success: function(data) {
	               response(data);
	            }
	        });
	    },
	    focus: function( event, ui ) {
	        $("#origem").val( ui.item.NOME );
	        carregarDados();
	        return false;
	    },
	    select: function( event, ui ) {
	        $("#origem").val( ui.item.NOME );
	        return false;
	    }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<a>" + item.NOME + "-" + item.UF + "</a><br>" )
        .appendTo( ul );
    };
	
	
	

    // Função para carregar os dados da consulta nos respectivos campos
    function carregarDados(){
    	var busca = $(document.getElementById("origem").getAttribute('name')).val();

    	if(busca != "" && busca.length >= 2){
    		$.ajax({
	            url: "consulta.php",
	            dataType: "json",	
	            data: {
	            	acao: 'consulta',
	                parametro: $(document.getElementById("origem").getAttribute('name')).val()
	            },
	            success: function( data ) {
	               
	               $('#nome').val(data[0].NOME);
	               $('#uf').val(data[0].UF);
	               
	            }
	        });
    	}
    }

    // Função para limpar os campos caso a busca esteja vazia
    function limpaCampos(){
       var busca = $('#origem').val();

       if(busca == ""){
	  
           $('#nome').val('');
           $('#uf').val('');
           
       }
    }
    
    
    
});


    
    

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá gabrieldarezzo, obrigado por responder. Mas em qual function eu altero?

Vídeo do problema, ele não carrega nos outros campos https://www.youtube.com/watch?v=z5S6syBPon8

$(function() {
    
    // Atribui evento e função para limpeza dos campos
    $('#origem').on('input', limpaCampos);

    // Dispara o Autocomplete a partir do segundo caracter
    $( "#origem" ).autocomplete({
	    minLength: 2,
	    source: function( request, response ) {
	        $.ajax({
	            url: "consulta.php",
	            dataType: "json",
	            data: {
	            	acao: 'autocomplete',
	                parametro: $('#origem').val()
	            },
	            success: function(data) {
	               response(data);
	            }
	        });
	    },
	    focus: function( event, ui ) {
	        $("#origem").val( ui.item.NOME );
	        carregarDados();
	        return false;
	    },
	    select: function( event, ui ) {
	        $("#origem").val( ui.item.NOME );
	        return false;
	    }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<a>" + item.NOME + "-" + item.UF + "</a><br>" )
        .appendTo( ul );
    };
	
	
	

    // Função para carregar os dados da consulta nos respectivos campos
    function carregarDados(){
    	var busca = $("#origem").val();

    	if(busca != "" && busca.length >= 2){
    		$.ajax({
	            url: "consulta.php",
	            dataType: "json",	
	            data: {
	            	acao: 'consulta',
	                parametro: $("#origem").val()
	            },
	            success: function( data ) {
	               
	               $('#nome').val(data[0].NOME);
	               $('#uf').val(data[0].UF);
	               
	            }
	        });
    	}
    }

    // Função para limpar os campos caso a busca esteja vazia
    function limpaCampos(){
       var busca = $('#origem').val();

       if(busca == ""){
	  
           $('#nome').val('');
           $('#uf').val('');
           
       }
    }
    
    
    
});


    
    

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por violin101
      Caros amigos, saudações.
       
      Estou com um problema de cálculo que não estou conseguindo resolver.
       
      Tenho uma rotina em Javascript que faz o seguinte cálculo qtde x vrUnit = total.
       
      qtde   x  vrUnit    =    total
      1,23   x  1,00       =    1,23    << até aqui tudo bem.
       
      o problema seria fazer o arredondamento para cima para impedir de fazer este cálculo:
      0,01 x 0,01 = 0,0001
       
      para digitar o valor estou utilizando esta função:
       
      /*Esta função quando o usuário digitar o valor aparece * 1,23 */ function formataDigitacao(i) { //Adiciona os dados para a másrcara var decimais = 2; var separador_milhar = '.'; var separador_decimal = ','; var decimais_ele = Math.pow(10, decimais); var thousand_separator = '$1'+separador_milhar; var v = i.value.replace(/\D/g,''); v = (v/decimais_ele).toFixed(decimais) + ''; var splits = v.split("."); var p_parte = splits[0].toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, thousand_separator); (typeof splits[1] === "undefined") ? i.value = p_parte : i.value = p_parte+separador_decimal+splits[1]; } /*Esta função faz a multiplicação entre Valor Unitário X Quantidade *faz a multiplicação correta */ function calcProd(){ //Obter valor digitado do produto var prod_qtde = document.getElementById("qtde").value; //Remover ponto e trocar a virgula por ponto while (prod_qtde.indexOf(".") >= 0) { prod_qtde = prod_qtde.replace(".", ""); } prod_qtde = prod_qtde.replace(",","."); //Obter valor digitado do produto var valor_unit = document.getElementById("vlrunit").value; //Remover ponto e trocar a virgula por ponto while (valor_unit.indexOf(".") >= 0) { valor_unit = valor_unit.replace(".", ""); } valor_unit = valor_unit.replace(",","."); //Calcula o Valor do Desconto if (valor_unit > 0 && prod_qtde > 0) { calc_total_produto = (parseFloat(valor_unit) * parseFloat(prod_qtde)); var numero = calc_total_produto.toFixed(2).split('.'); //<<== aqui faço o arredondamento das casas decimais de 1,234 p/ 1,23 numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.'); document.getElementById("vlrtotal").value = numero.join(','); } else { if (valor_unit > 0) { document.getElementById("vlrtotal").value = document.getElementById("vlrunit").value; } else { document.getElementById("vlrtotal").value = "0,00"; } } } Grato,
       
      Cesar
    • Por violin101
      Caros amigos, saudações.
       
      Estou com uma dúvida de validação de INPUT com função moeda.
       
      Tenho um input onde o usuário digita um valor qualquer, por exemplo: 1.234,56
      o problema é quando precisa atualizar o valor.
       
      Quando o usuário atualizar o input fica assim: 1.234,
       
      como faço para atualizar as casas decimais, conforme o valor for sendo alterado ?
       
      o input está assim:
       
      <div class="col-md-2"> <label for="">Valor Unitário</label> <input type="text" class="form-control" id="estoqprod" name="estoqprod" style="font-size:15px; font-weight:bold; width:100%; text-align:center;" placeholder="0,00" OnKeyUp="calcProd();" onkeypress="return(FormataMoeda(this,'.',',',event))" > </div>  
      a função para formatar o input para moeda está assim:
      obs.: a Função CalcProd está executando corretamente
      function calcProd(){ //Obter valor digitado do produto var estoq_prod = document.getElementById("estoqprod").value; //Remover ponto e trocar a virgula por ponto while (estoq_prod.indexOf(".") >= 0) { estoq_prod = estoq_prod.replace(".", ""); } estoq_prod = estoq_prod.replace(",","."); //Obter valor digitado do produto var prod_qtde = document.getElementById("qtde").value; //Remover ponto e trocar a virgula por ponto while (prod_qtde.indexOf(".") >= 0) { prod_qtde = prod_qtde.replace(".", ""); } prod_qtde = prod_qtde.replace(",","."); //Calcula o Valor do Desconto if (prod_qtde > 0 && estoq_prod > 0) { calc_total_produto = parseFloat(prod_qtde) - parseFloat(estoq_prod); var numero = calc_total_produto.toFixed(2).split('.'); //Calculo para não deixar GRAVAR valores negativos if (calc_total_produto < 0 ) { numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.') * -1; document.getElementById("qtdeTotal").value = numero.join(','); } else { numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.'); document.getElementById("qtdeTotal").value = numero.join(','); } } else { if (estoq_prod > 0) { document.getElementById("qtdeTotal").value = document.getElementById("estoqprod").value; } else { document.getElementById("qtdeTotal").value = "0,00"; } } } /*---Função para Formatar Campo para Moeda [R$]---*/ function FormataMoeda(objTextBox, SeparadorMilesimo, SeparadorDecimal, e){ var sep = 0; var key = ''; var i = j = 0; var len = len2 = 0; var strCheck = '0123456789'; var aux = aux2 = ''; var whichCode = (window.Event) ? e.which : e.keyCode; if (whichCode == 13) return true; key = String.fromCharCode(whichCode); // Valor para o código da Chave if (strCheck.indexOf(key) == -1) return false; // Chave inválida len = objTextBox.value.length; for(i = 0; i < len; i++) if ((objTextBox.value.charAt(i) != '0') && (objTextBox.value.charAt(i) != SeparadorDecimal)) break; aux = ''; for(; i < len; i++) if (strCheck.indexOf(objTextBox.value.charAt(i))!=-1) aux += objTextBox.value.charAt(i); aux += key; len = aux.length; if (len == 0) objTextBox.value = ''; if (len == 1) objTextBox.value = '0'+ SeparadorDecimal + '0' + aux; if (len == 2) objTextBox.value = '0'+ SeparadorDecimal + aux; if (len > 2) { aux2 = ''; for (j = 0, i = len - 3; i >= 0; i--) { if (j == 3) { aux2 += SeparadorMilesimo; j = 0; } aux2 += aux.charAt(i); j++; } objTextBox.value = ''; len2 = aux2.length; for (i = len2 - 1; i >= 0; i--) objTextBox.value += aux2.charAt(i); objTextBox.value += SeparadorDecimal + aux.substr(len - 2, len); } return false; }  
      Grato,
       
      Cesar
    • Por violin101
      Caros amigos, saudações.
       
      Estou com uma dúvida de validação de INPUT com função moeda.
       
      Tenho um input onde o usuário digita um valor qualquer, por exemplo: 1.234,56
      o problema é quando precisa atualizar o valor.
       
      Quando o usuário atualizar o input fica assim: 1.234,
       
      como faço para atualizar as casas decimais, conforme o valor for sendo alterado ?
       
      o input está assim:
       
      <div class="col-md-2"> <label for="">Valor Unitário</label> <input type="text" class="form-control" id="estoqprod" name="estoqprod" style="font-size:15px; font-weight:bold; width:100%; text-align:center;" placeholder="0,00" OnKeyUp="calcProd();" onkeypress="return(FormataMoeda(this,'.',',',event))" > </div>  
      a função para formatar o input para moeda está assim:
      obs.: a Função CalcProd está executando corretamente
      function calcProd(){ //Obter valor digitado do produto var estoq_prod = document.getElementById("estoqprod").value; //Remover ponto e trocar a virgula por ponto while (estoq_prod.indexOf(".") >= 0) { estoq_prod = estoq_prod.replace(".", ""); } estoq_prod = estoq_prod.replace(",","."); //Obter valor digitado do produto var prod_qtde = document.getElementById("qtde").value; //Remover ponto e trocar a virgula por ponto while (prod_qtde.indexOf(".") >= 0) { prod_qtde = prod_qtde.replace(".", ""); } prod_qtde = prod_qtde.replace(",","."); //Calcula o Valor do Desconto if (prod_qtde > 0 && estoq_prod > 0) { calc_total_produto = parseFloat(prod_qtde) - parseFloat(estoq_prod); var numero = calc_total_produto.toFixed(2).split('.'); //Calculo para não deixar GRAVAR valores negativos if (calc_total_produto < 0 ) { numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.') * -1; document.getElementById("qtdeTotal").value = numero.join(','); } else { numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.'); document.getElementById("qtdeTotal").value = numero.join(','); } } else { if (estoq_prod > 0) { document.getElementById("qtdeTotal").value = document.getElementById("estoqprod").value; } else { document.getElementById("qtdeTotal").value = "0,00"; } } } /*---Função para Formatar Campo para Moeda [R$]---*/ function FormataMoeda(objTextBox, SeparadorMilesimo, SeparadorDecimal, e){ var sep = 0; var key = ''; var i = j = 0; var len = len2 = 0; var strCheck = '0123456789'; var aux = aux2 = ''; var whichCode = (window.Event) ? e.which : e.keyCode; if (whichCode == 13) return true; key = String.fromCharCode(whichCode); // Valor para o código da Chave if (strCheck.indexOf(key) == -1) return false; // Chave inválida len = objTextBox.value.length; for(i = 0; i < len; i++) if ((objTextBox.value.charAt(i) != '0') && (objTextBox.value.charAt(i) != SeparadorDecimal)) break; aux = ''; for(; i < len; i++) if (strCheck.indexOf(objTextBox.value.charAt(i))!=-1) aux += objTextBox.value.charAt(i); aux += key; len = aux.length; if (len == 0) objTextBox.value = ''; if (len == 1) objTextBox.value = '0'+ SeparadorDecimal + '0' + aux; if (len == 2) objTextBox.value = '0'+ SeparadorDecimal + aux; if (len > 2) { aux2 = ''; for (j = 0, i = len - 3; i >= 0; i--) { if (j == 3) { aux2 += SeparadorMilesimo; j = 0; } aux2 += aux.charAt(i); j++; } objTextBox.value = ''; len2 = aux2.length; for (i = len2 - 1; i >= 0; i--) objTextBox.value += aux2.charAt(i); objTextBox.value += SeparadorDecimal + aux.substr(len - 2, len); } return false; }  
      Grato,
       
      Cesar
    • Por violin101
      Caros amigos, saudações.
       
      Desculpa postar minha dúvida, fiz várias pesquisa mas não tive sucesso.
       
      Como faço para capturar o ID do SELECT selecionado e passar para base_url ?
       
      Exemplo:
      após selecionar o ID passar para <?php echo base_url();?>estoque/ajuste/adicionar/ <== passar o ID aqui.
       
      <div class="col-md-6"> <label for="tipoDepart" class="control-label">Departamento:</label> <select name="tipoDepart" id="tipoDepart" style="width:100%;" class="form-control"> <option value="">Selecione um Departamento</option> <?php foreach ($dprts as $dp) { echo '<option value="'.$dp->idDepartamento.'">'.$dp->departamento.'</option>'; } ?> </select> </div> <div class="col-md-6"> <div class="card card-entrad"> <div class="card-header"> <label class="card-tlentr">Entrada - Estoque</label> </div> <div class="card-body"> <div style="text-align:center;"> <a href="<?php echo base_url();?>estoque/ajuste/adicionar/" <== COMO PASSO O ID SELECIONADO AQUI, PARA ABRIR A PÁGINA COM O ID DO DPTO ? class="btn btn-cinza">Adicionar</a> </div> </div> </div> </div>  
      Observação: preciso capturar e passar o ID para gerar TABELA referente a cada departamento.
       
      Grato,
       
      Cesar
    • Por violin101
      Caros amigos, saudações.
       
      Tem como passar para o Formulário um Campo vindo via AJAX no formato moeda ?
       
      Tenho uma rotina onde o usuário escolhe através de uma Lista na modal de Produtos e o sistema informa o formulário os seguintes campos:
      código | descrição | espécie | estoque atual.
       
      o estoque atual preciso passar nesse formato, para validação de quantidade: 15.00 ou 15,00.
      ou seja:
      converter de: 15 
      para: 15.00 com casas decimais

      tem como fazer isso ?
       
      Grato,
       
      Cesar
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.