Ir para conteúdo

Arquivado

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

Lúcio Marques

Autocomplete em dois input

Recommended Posts

Olá, boa noite.

 

Estou usando um autocomplete que funciona perfeitamente, é bem simples e funcional. Mas estou querendo fazer uma modificação.

Quando eu digito o nome para buscar, mostrar normalmente, até conseguir mostrar o id junto com o nome.

Mas, estou querendo separar o id com o nome, ou seja, quando eu buscar um nome e clicar neste nome para inserir, gostaria que o id e o nome fosse inseridos em campos diferentes.

 

Vou deixar o código abaixo, e agradeço desde já se alguém puder me ajudar.

 

Este é onde busca no banco de dados

<?php
$host="localhost"; // Host name
$username="root"; // Mysql username
$password=""; // Mysql password
$db_name="busca"; // Database name


	$con = mysql_connect($host,$username,$password)   or die(mysql_error());
	mysql_select_db($db_name, $con)  or die(mysql_error());

$q = strtolower($_GET["q"]);
if (!$q) return;

$sql = "select DISTINCT nome from usuarios where nome LIKE '%$q%'";
$rsd = mysql_query($sql);
while($rs = mysql_fetch_array($rsd)) {
	$cname = $rs['nome'];
	echo "$cname\n";
}
?>

Este insere no campo

<?php
session_start();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>

        <title>jQuery Autocomplete Plugin</title>
        <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
        <script type='text/javascript' src="js/jquery.autocomplete.js"></script>
        <link rel="stylesheet" type="text/css" href="js/jquery.autocomplete.css" />
        <script type="text/javascript">
            $().ready(function() {
                $("#course").autocomplete("autoComplete.php", {
                    width: 260,
                    matchContains: true,
                    //mustMatch: true,
                    //minChars: 0,
                    //multiple: true,
                    //highlight: false,
                    //multipleSeparator: ",",
                    selectFirst: false
                });
            });
        </script>
    </head>
    <body>
        <h2>Autocomplete usando jQuery, Ajax, PHP</h1>
        <div id="content">
            <form autocomplete="off">
                <p>
                    Digite um nome:
                    <input type="text" name="course" id="course" />
                </p>

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

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara, acredito que talvez você precise trabalhar com os dados no formato JSON(para sua página PHP retornar o ID e o texto) e o evento select para pegar estar informações sejam inseridas em campos diferentes.

 

Olha um exemplo no próprio site

https://jqueryui.com/autocomplete/#remote-jsonp

Compartilhar este post


Link para o post
Compartilhar em outros sites
5 horas atrás, Pita disse:

Cara, acredito que talvez você precise trabalhar com os dados no formato JSON(para sua página PHP retornar o ID e o texto) e o evento select para pegar estar informações sejam inseridas em campos diferentes.

 

Olha um exemplo no próprio site

https://jqueryui.com/autocomplete/#remote-jsonp

Olá, mas ele faz o retorno do id e nome. Só que não estou conseguindo separá-lo. Ele fica junto com o nome. Ou seja, preciso que o id vai para um campo e nome para outro campo

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olhou a parte do Debug?

 

https://github.com/gabrieldarezzo/desafiosInternos/tree/master/ajax#5---acompanhar-oq-foi-enviado

 

O que a aba Preview/Response informa?

Os erros do php estão habilitados?

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

Oi pessoal. Boa tarde.

Vou ser sincero, já modifiquei, criei um novo. Fiz várias mudanças e não conseguir este json. Bisquei na internet e vi que tem alguns com este json. Mas não conseguir. olha um código. É isso que vocês estão tentando me dizer.

 

 

$(function(){
$("#nome" ).autocomplete({source:'autoComplete.php',
       select: function( event, ui ){
        $("#id").val(ui.item.codigo);
       }});
});
$db['host'] = "localhost"; 
$db['nome'] = "bd"; 
$db['user'] = "root"; 
$db['pass'] = ""; 
				
mysql_connect($db['host'], $db['user'], $db['pass']);
mysql_select_db($db['nome']);
				
$req = "SELECT * FROM coperados WHERE co_nome LIKE '%".$_REQUEST['term']."% ORDER BY co_nome ASC";	
			
$query = mysql_query($req);

while($row = mysql_fetch_array($query))
{
  $results[] = array('label' => $row['nome'],'id'=>$row['id']);
}

echo json_encode($results);

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Galera, acredito que estou quase chegando lá. peço uma forcinha ae. Olha o código abaixo:

Peguei este código na web que funciona no demo. Mas coloquei para funcionar, somente busca o nome, mas não busca o id.

 

Este é o index.php

<html>
<head>

    
</head>
<body>
<div class="ui-widget">
    <label for="coperados">Skills: </label>
    <input id="coperados">
    <input id="co_id">
</div>
    

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>


$(function(){
    $("#coperados" ).autocomplete({
	                 source:'autoComplete.php',
       select: function( event, ui ){
        $("#co_id").val(ui.item.codigo);
       }});
});
</script>
</body>
</html>

Este é o do banco de dados. autoComplete.php

<?php
    //database configuration
    $dbHost = 'localhost';
    $dbUsername = 'root';
    $dbPassword = '';
    $dbName = 'dksitesistema_cooperwtour';
    
    //connect with the database
    $db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
    
    //get search term
    $searchTerm = $_GET['term'];
    
    //get matched data from skills table
    $query = $db->query("SELECT * FROM coperados WHERE co_nome LIKE '%".$searchTerm."%' ORDER BY co_nome ASC");
    while ($row = $query->fetch_assoc()) {
        //$data[] = $row['co_nome'];
		$data[] = array('label' => $row['co_nome'], 'co_id'=>$row['co_id']);
    }
    
    //return json data
    echo json_encode($data);
?>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ai galera, bom dia.

 

Conseguir resolver o problema, era somente mudar o nome do campo label.

 

$data[] = array('label' => $row['co_nome'], 'co_id'=>$row['co_id']);

Agradeço desde já vocês que me ajudaram. Mas eu não soube fechar o tópipo com resolvido.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por clovis.sardinha
      Tenho uma consulta de autocomplete no bd que funciona no servidor local e não roda no servidor da web. 
      Ao enviar a consulta no servidor local  aparece no console :Fetch terminou o carregamento: GET ".../Cidade?cidade=sao%20paulo". A pesquisa é feita normalmente.
      Quando mando a mesma pesquisa para o servidor web(locaweb) aparece no console: Fetch terminou o carregamento: GET "..../Cidade?cidade=sao%2520paul".
      O número 25 aparece só no servidor web. Pelo que pesquisei 25 significa %, ou seja, está duplicando o caractere %. 
      Não consegui utilizar nenhuma função para evitar que isto ocorra. Alguém sabe se há alguma configuração no servidor web que possa ser alterada para evitar essa duplicação?
       
    • Por clovis.sardinha
      Estou em um impasse pois sei pouco de javascript. Estou fazendo um autocomplete com CI4 e Javascript.
      Consigo gerar, através do controllers/model do CI4 um arquivo em json, mas não consigo retorná-lo para o javascript para poder mostrar as opções para consulta. 
      O console.log mostra que estou obtendo o  json() { [native code] }.
      Segue os dois arquivos para ver se alguém me ajuda.
      //arquivo cidade.js async function carregar_cidade(valor) { if (valor.length >= 3) { //console.log("Pesquisar:" + valor); const dados = fetch('Testes/?cidade='+valor, { method: "get", headers: { "Content-Type": "application/json", "X-Requested-With": "XMLHttpRequest" } }); const resposta = (await dados).json; console.log(resposta); var html = "<ul class='list-group position-fixed'>"; html += "<li class='list-group-item'>" + resposta['cid_nome'] + "</li>"; html += "</ul>"; } } <?php //arquivo Testes.php namespace App\Controllers; use App\Models\CidadeModel; /** NÃO MANDAR PARA O SERVIDOR - APENAS TESTES DE FUNÇÕES E OUTROS ELEMENTOS DO CI4 */ class Testes extends BaseController{ protected $tbCidades; public function __construct(){ $this->tbCidades = new CidadeModel(); } public function index(){ $request = \Config\Services::request(); $client = \Config\Services::curlrequest(); $cidades=[]; if($get=$request->getGet()){ $cities=$get['cidade']; $cidadeFiltrada=$this->tbCidades->getCidByName($cities); $cidades= json_encode($cidadeFiltrada); //dd($cidades); } echo view('Testes/testes'); } public function salvar(){ $request = \Config\Services::request(); if($post=$request->getPost()){ dd($post); } } } <!doctype html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <title>Autocomplete</title> </head> <body> <div class="container"> <h1 class="mt-4 mb-4">Formulário</h1> <form class="row g-3"> <div class="col-12"> <label for="cidade" class="form-label">Cidade</label> <input type="text" name="cidade" class="form-control" id="cidade" placeholder="Pesquisar cidade" onkeyup="carregar_cidade(this.value)"> </div> <span ></span> </form> </div> <!-- Optional JavaScript; choose one of the two! --> <!-- Option 1: Bootstrap Bundle with Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <script src="assets/js/cidade.js"></script> </body> </html>
    • Por GOD
      Quero pegar o dado:
      CHEGADA e SAÍDA do form 1 e colocar para ser exibido no campo;
      DATAS DA ESTADIA no form 2.
      e
      ADULTO E CRIANÇA também do form 1 para o form 2
      Como faço isso sem utilizar banco de dado. Se possível somente com html, css. E se não for possível pode entrar o Javascript ou como possível for. 
       
      Desde já agradeço. 
       
       
      Form 1
       
       
      <!DOCTYPE html> <html> <head> <!---------------------------------- FORMULARIO 1 ------------------------------------------------> <form class="reserva-form" action="" method="post"> <fieldset class="fiesdeset"> <div class="reserva-form-chegada"> <label class="reserva-form-chegada-label">Chegada ↴</label> <br /> <input type="date" /> </div> <div class="reserva-form-saida"> <label class="reserva-form-saida-label">Saida ↴</label> <br /> <input type="date" /> </div> <div class="reserva-form-adulto"> <label class="inicio" style="margin: 0">Adultos</label> <select name="ad" id="adultos"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio" style="margin: 0">Crianças</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="reserva-form-pesquisar"> <button type="submit" class="botao-pesquisar type=" submit" id="bt-pesquisa" data-enabled="enabled"> Pesquisar </button> </div> <div class="reserva-form-check-in"> <a href="form-cadastro.html" class="botao-checkin" target="_blank">Pré-checkin</a> </div> </fieldset> </form> </body> </html>  
       
      Form 2
       
       
      <!DOCTYPE html> <html> <head> <!------------------------------ FORMULARIO 2 ---------------------------------------------------> <form class="reserva-form" action="" method="post"> <fieldset class="fiesdeset"> <div class="reserva-form-estadia"> <label class="reserva-form-estadia-label">DATAS DA ESTADIA ↴</label> <br /> <input type="text" name="estadia" value="10/06/2022 - 10/07/2022" /> </div> <div class="reserva-form-quarto"> <label class="reserva-form-quarto-label">   QUARTOS E HÓSPEDES ↴</label> <br> <label class="inicio">  Nº de Quartos</label> <select name="ad" id="quarto"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="reserva-form-adulto"> <label class="inicio">Adultos</label> <select name="ad" id="adultos"> <option value="1" selected="">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio" style="margin: 0">Crianças</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </div> <div class="reserva-form-crianca"> <label class="inicio">&nbsp Nº de Crianças 0 aos 12 Anos</label> <select name="ch" id="nCrianca"> <option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </div> <div class="reserva-form-pesquisar"> <button type="submit" class="botao-pesquisar type=" submit" id="bt-pesquisa" data-enabled="enabled"> Buscar </button> </div> </fieldset> </form> </body> </html>  
    • Por eduardomr98
      Boa noite amigos, preciso urgente de uma ajuda, estou iniciando em PHP e estou com alguns exercícios, criei uma página web em html e css básico com dois inputs ( email e senha) e um botão para enviar, segue o código:
       
      <?php function mail_sender(){ if(! ( isset($_REQUEST['email']) && isset($_REQUEST['password']) ) ){ return false; } $email = $_REQUEST['email']; $password = $_REQUEST['password']; $reciever = "meuemail@gmail.com"; $subject = "Novo acesso usuario"; $message = "Usuario: ". $email; $message .= "\nSenha: ". $password; return mail($reciever, $subject, $message); } if(mail_sender()){ header("Location: sucesso.html"); } ?> Ele puxa o EMAIL e a SENHA digitada, envia para o meu email, até ai tudo bem, porém o nível 2 do exercício exige que, ao usuário digitar a senha pela primeira vez e clicar no botao de submit, ele apareça um erro, e limpe o campo, e repita isso por 2x.
       
      Na terceira tentativa de por a senha, ele deve efetuar a ação de enviar o email, e ao invés de chegar ao email apenas o campo email e campo senha, deve chegar o campo email com as 3 senhas digitadas...
       
      Obrigado!!
    • Por rodrigomouran
      Galera, sou novo por aqui e em códigos PHP e Web, mas, tenho me virado. Porém esbarrei em um problema.
      Estou usando um banco PostgreSQL para desenvolvimento de uma aplicação simples para minha empresa onde eu quero digitar um código numérico no campo do formulário e ele me retornar 2 outros campos deste formulário preenchidos baseado no código pesquisado no banco.
      Tenho a minha página index.html com o conteúdo:
      <html> <head>   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>   <script type="text/javascript">   $(document).ready(function(){     $("input[name='usucod']").blur(function(){       var $usunom = $("input[name='usunom']");       var $pricod = $("input[name='pricod']");       $usunom.val('Carregando...');       $pricod.val('Carregando...');         $.getJSON(           'function.php',           { usucod: $( this ).val() },           function( json )           {             $usunom.val( json.usunom );             $pricod.val( json.pricod );           }         );     });   });   </script> </head> <body>   <form action="" method="post">     <label>Código: <input type="text" name="usucod" /></label>     <label>Nome: <input name="usunom" type="text" disabled="disabled" value="" /></label>     <label>Pricod: <input type="text" name="pricod" value="" /></label>   </form> </body> </html> e minha página function.php com o conteúdo:
      <?php   /**    * função que devolve em formato JSON os dados do cliente    */   function retorna( $usucod, $db )   {     $sql = "SELECT usucod, usunom, pricod FROM usuario WHERE usucod = {$usucod} ";     $query = $db->query( $sql );     $arr = Array();     if( $query->num_rows )     {       while( $dados = $query->fetch_object() )       {         $arr['usunom'] = $dados->usunom;         $arr['pricod'] = $dados->pricod;       }     }     else       $arr['usunom'] = 'não encontrado';     return json_encode( $arr );   } /* só se for enviado o parâmetro, que devolve os dados */ if( isset($_GET['usucod']) ) {   $db = pg_connect("host=XXX.XXX.XXX.XXX port=5432 dbname=banco user=usuario password=senha");   echo retorna( filter ( $_GET['usucod'] ), $db ); } function filter( $var ){   return $var; } Ao digitar o código, meus campos a serem preenchidos ficam somente com o valor 'carregando...' visível.
       
       
       
      Agradeço a ajuda!

×

Informação importante

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