1

inserir a descrição da imagem aqui

Estou usando uma consulta dinâmica co AJAX + JQUERY, o resultado esta aparecendo abaixo como mostra na imagem acima.

<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>

O que preciso,que o resultado seja gerado dentro o input e que após encontrar o registro solicitado o mesmo fique selecionado dentro do input, como poderia fazer isso ?

Segue o JS referente e a consulta, caso precisem de mais alguma informação:

busca.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);
}

Artigo base

1 Resposta 1

3

Então no funcs.js, vc deve atribuir a resposta ao value do input.

Troque:

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

por:

JavaScript nativo:

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

OU JQuery:

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

E pode remover a div: <div id="resultado"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .