Insert ajax dynamic query result inside the input

1

I'musingadynamicquerywithAJAX+JQUERY,theresultisappearingbelowasshownintheimageabove.

<divclass="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 do I need, that the result is generated within input and that after finding the requested record it is selected within input , how could I do that?

Follow the JS referencing and query if you need any further information:

  

search.php

<?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);
?>
  

funcs.js

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

    
asked by anonymous 05.12.2016 / 14:58

1 answer

3

Then in funcs.js , you must assign the answer to the value of the input.

Switch:

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

by:

Native JavaScript:

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

OR JQuery:

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

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

    
06.12.2016 / 01:33