Insert result ajax dynamic query into input

Question

I am using a dynamic query co AJAX + JQUERY, the result is appearing below as shown in the image above.

<div class="form-group">
  <label for="inputEmail" class="col-lg-4 control-label">FORNECEDOR</label>
 <div class="col-lg-8">
    <input type="text" class="form-control" id="busca"  name="busca" onkeyup="buscarFornec(this.value)" style="text-transform:uppercase">
    <div id="resultado"></div>
  </div>
</div>

What I need, input and that after finding the requested registration the same is selected within the input, how could I do that ?

Follow the JS and the query, if you need more information:

php search.

<?php
// Incluir aquivo de conexão
include("conn_sys.php");

// Recebe o valor enviado
$valor = $_GET['valor'];

// Procura titulos no banco relacionados ao valor
$sql = mysql_query("SELECT * FROM fornecedor WHERE fornec_status = 0 AND fornec_nome  LIKE '%".$valor."%'",$conn_sys );

// Exibe todos os valores encontrados
while ($fornec = mysql_fetch_object($sql)) {
    echo "<a href=\"javascript:func()\" onclick=\"exibirConteudo('".$fornec->fornec_fantasia."')\">" . $fornec->fornec_nome. "</a><br />";
}

// Acentuação
header("Content-Type: text/html; charset=ISO-8859-1",true);
?>

funcjs.

var req;

// FUNÇÃO PARA BUSCA NOTICIA
function buscarFornec(valor) {

// Verificando Browser
if(window.XMLHttpRequest) {
   req = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
   req = new ActiveXObject("Microsoft.XMLHTTP");
}

// Arquivo PHP juntamente com o valor digitado no campo (método GET)
var url = "busca.php?valor="+valor;

// Chamada do método open para processar a requisição
req.open("Get", url, true); 

// Quando o objeto recebe o retorno, chamamos a seguinte função;
req.onreadystatechange = function() {

    // Exibe a mensagem "Buscando Noticias..." enquanto carrega
    if(req.readyState == 1) {
        document.getElementById('resultado').innerHTML = 'Buscando Fornecedor ...';
    }

    // Verifica se o Ajax realizou todas as operações corretamente
    if(req.readyState == 4 && req.status == 200) {

    // Resposta retornada pelo busca.php
    var resposta = req.responseText;

    // Abaixo colocamos a(s) resposta(s) na div resultado
    document.getElementById('resultado').innerHTML = resposta;
    }
}
req.send(null);
}


// FUNÇÃO PARA EXIBIR NOTICIA
function exibirConteudo(id) {

// Verificando Browser
if(window.XMLHttpRequest) {
   req = new XMLHttpRequest();
}
else if(window.ActiveXObject) {
   req = new ActiveXObject("Microsoft.XMLHTTP");
}

// Arquivo PHP juntamento com a id da noticia (método GET)
var url = "exibir.php?id="+id;

// Chamada do método open para processar a requisição
req.open("Get", url, true); 

// Quando o objeto recebe o retorno, chamamos a seguinte função;
req.onreadystatechange = function() {

    // Exibe a mensagem "Aguarde..." enquanto carrega
    if(req.readyState == 1) {
        document.getElementById('conteudo').innerHTML = 'Aguarde...';
    }

    // Verifica se o Ajax realizou todas as operações corretamente
    if(req.readyState == 4 && req.status == 200) {

    // Resposta retornada pelo exibir.php
    var resposta = req.responseText;

    // Abaixo colocamos a resposta na div conteudo
    document.getElementById('conteudo').innerHTML = resposta;
    }
}
req.send(null);
}

Base article

Answer 1

Then in the funcs.js, vc should assign the response to input value.

Change:

document.getElementById('conteudo').innerHTML = resposta;

for:

Native Javascript:

document.getElementById("busca").value = resposta;

OR Jquery:

$('#busca').val(resposta);

And you can remove the div: <div id="resultado"></div>