Consider that your PHP code generates the following result:
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 />
Note : The above names were randomly generated through the Fake Name Generator system and any similarity to reality will be mere coincidence.
We can try to retrieve these values using JavaScript using an asynchronous request as follows:
$(() => {
$("#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><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="name" name="name" placeholder="Digite seu nome" />
Note : The request code was minimized to work according to the context of the example, however, the original idea of the question remained.
See that the result is exactly the HTML code generated by PHP, but it is a raw string , that is, JavaScript will not know how to handle it. In order for it to interpret the result, you must indicate how it should be done; and the easiest way is to use known formats, such as 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><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="name" name="name" placeholder="Digite seu nome" />
Indicating that the return will be of the JSON format, with dataType: 'json'
, and PHP actually generating a response in this format, the result obtained in JavaScript will already be a list of values that can be passed to the autocompletion plugin.
I am not able to create an example here that comes close to your question, but I believe that if it is not exactly the code below, it will be something very close.
PHP generating 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 getting 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
});
}
});
}
}