Autocomplete em vários inputs

7master · Setembro 26, 2017

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('');
           
       }
    }
    
    
    
});

gabrieldarezzo · Setembro 26, 2017

Estou achando q é o mesmo problema desse post:

7master · Setembro 27, 2017

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('');
           
       }
    }
    
    
    
});

Entrar

Arquivado

Autocomplete em vários inputs

Recommended Posts

7master 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrieldarezzo 255

Compartilhar este post

Link para o post

Compartilhar em outros sites

7master 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Pergunta: Pretty Womans in your town - Actual Girls

Pergunta: Beautiful Girls in your city - Actual Women

PHP - Agradecimento e uma Dúvida

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante