SQL query fetching Javascript dynamic field

Basic schema of how to make a bank query via Ajax in pure JavaScript with data return in JSON and filling other form fields

1.) HTML form

This example form has 3 fields ( nome , email and cidade ). When typing a name and clicking OK , this "name" will be sent via Ajax to a PHP page that will query the database and return 2 information, email and cidade , relative to the "name" sent.

<input type="text" id="nome" name="nome" placeholder="Digite um nome e clique OK" />
<input type="button" onclick="carrega()" value="OK" />
<br />
<input type="text" id="email" placeholder="E-mail" disabled="disabled" />
<br />
<input type="text" id="cidade" placeholder="Cidade" disabled="disabled" />

2.) Ajax

In the code below in JavaScript, I created a carrega() function that will be triggered by clicking the OK button on the form. It sends to the page verificar.php (example) the value of the% field of the form% and the response in nome is converted to JSON, http.responseText , and then the information in each field is filled by its JSON.parse(http.responseText); .

<script>
var http = false;
http = new XMLHttpRequest();

function carrega(){

   var nome = document.getElementById('nome').value;

   var url_="verificar.php?nome="+nome;
   http.open("GET",url_,true);
   http.onreadystatechange=function(){
      if(http.readyState==4){
         var retorno = JSON.parse(http.responseText);

         document.getElementById('email').value = retorno.email;
         document.getElementById('cidade').value = retorno.cidade;

      }
   }
   http.send(null);

}
</script>

3.) PHP

In the PHP page you will receive the value of the field id sent by the form via AJAX, make the query in the database and return the result in JSON format:

<?php

$nome = $_GET['nome'];

if(isset($nome)){

   $conn = new mysqli("host", "usuario", "senha", "banco");

   $sql = "SELECT email,cidade from tabela where nome = '$nome'";

   $resultados = $conn->query($sql);

   $json = array();

   while ($rowResultados = $resultados->fetch_assoc()) {

      $dados = array(
         'email' => $rowResultados['email'],
         'cidade' => $rowResultados['cidade']
      );
      $json = $dados;

   }

   echo json_encode($json);

   mysqli_close($conn);

}
?>

Below I made an example where you can modify and send the value using an ajax and make the query.

  

Type the word "mateus" in the first field and it will complete the   second and third.

jQuery('#campo1').on('keyup',function(){
  //Aqui você pode fazer um ajax enviando o valor digitado e operar
  if(this.value == 'mateus'){
    jQuery('#campo2').val('[email protected]');
    jQuery('#campo3').val('(81) 98615-3161');
  }
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text" id="campo1">
<input type="text" id="campo2">
<input type="text" id="campo3">