Skip to main content
3 de 3
adicionou 236 caracteres ao conteúdo
Woss
  • 77,2mil
  • 15
  • 123
  • 221

Consideremos que seu código PHP gere o seguinte resultado:

Kevin T. Sullivan<br />
Nicolash Correia Cunha<br />
Lavinia Azevedo Lima<br />
Isabelle Lima Silva<br />
Kauan Silva Almeida<br />
Victor Costa Carvalho<br />
Sophia Pinto Barbosa<br />
Vitor Goncalves Barros<br />
Daniel Sousa Melo<br />
Davi Gomes Correia<br />

Nota: os nomes acima foram gerados aleatoriamente através do sistema Fake Name Generator e qualquer semelhança com a realidade será mera coincidência.

Podemos tentar resgatar estes valores com JavaScript utilizando uma requisição assíncrona da seguinte forma:

$(() => {
  $("#name").on("keyup", function () {
    $.ajax({
      url: "https://gist.githubusercontent.com/acwoss/25f02a59086ecc1d11fd2201586420db/raw/1d372b624d4cc2416685c0c438eff75c0912747c/SOpt-200357-response.html",
      type: 'GET',
      success: function(data) {
        $("#name").autocomplete({source: [data]});
      }
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input id="name" name="name" placeholder="Digite seu nome" />

Nota: o código da requisição foi minimamente alterado para funcionar conforme o contexto do exemplo, porém, manteve-se a ideia original da pergunta.

Veja que o resultado é exatamente o código HTML gerado pelo PHP, mas é uma raw string, isto é, o JavaScript não saberá como tratá-la. Para que ele possa interpretar o resultado, você deve indicar como isso deve ser feito; e a maneira mais fácil é utilizar formatos conhecidos, como o JSON.

$(() => {
  $("#name").on("keyup", function () {
    $.ajax({
      url: "https://gist.githubusercontent.com/acwoss/bba40268dd678cb4ee3b2291cdede7e2/raw/8586099a9451f44d3ef86046023bbe8c8f9ba202/SOpt-200357-response.json",
      type: 'GET',
      dataType: 'json',
      success: function(data) {
        $("#name").autocomplete({source: data});
      }
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input id="name" name="name" placeholder="Digite seu nome" />

Indicando que o retorno será do formato JSON, com dataType: 'json', e o PHP gerando, de fato, uma resposta neste formato, o resultado obtido no JavaScript já será uma lista de valores que poderá ser passada ao plugin de autocomplemento.

Eu não tenho condições de criar aqui um exemplo que se aproxime ao da sua pergunta, mas acredito que se não for exatamente o código abaixo, será algo muito próximo.

PHP gerando JSON

<?php
require 'connect.php';

$keyword = $_POST['keyword'].'%';
$query = "SELECT nome_funcionario FROM funcionarios WHERE nome_funcionario LIKE '$keyword' LIMIT 10";

$result = mysqli_query($connect, $query);

if($result)
{
  $output = array();

  while($row = mysqli_fetch_array($result))
  {
    $output[] = $row['nome_funcionario'];
  }

  header('Content-Type: application/json');
  echo json_encode($output);
}
?>

JavaScript recebendo JSON

function autocomplet() {
    var min_length = 1;
    var keyword = $('#cfuncionario').val();

    if (keyword.length >= min_length) {
        $.ajax({
            url: "php/cfuncionario.php",
            type: 'POST',
            data: {keyword: keyword},
            success:function(data){
                console.log(data);
                $("#cfuncionario").autocomplete({
                    source: data
                });
            }
        });
    }
}
Woss
  • 77,2mil
  • 15
  • 123
  • 221