Styjun

I'm trying to add the autocomplete feature to one of my input-field, as soon as the user types the function triggers and it queries the DB to get the numbers.

This is the input field code

<div class="input-field col s12 m3 offset-m1 l2 offset-l1">
<input id="NumEmpleado" name="NumEmpleado" type="text" class="validate autocomplete" autocomplete="off" required="">
<label for="NumEmpleado">N° de Empleado</label>
</div>

This is the script code:

<script>
 $(document).ready(function()
 $(document).on('input', 'input.autocomplete', function() 
 let inputText = $(this).val(); //Gets text from input
 $.get('suggest.php?key=' + inputText) //Makes the query
 .done(function(suggestions) //gets JSON data as suggestions 
 console.log(suggestions); //Prints
 $('input.autocomplete').autocomplete( //Initialize auto complete with new data
 data: suggestions
 );
 );
 );
 );
</script>

This is suggest.php - which is triggered when the user types

<?php
$key=$_GET['key'];
$NumEmpleado = array();
$conn = mysqli_connect('localhost', 'root', '', 'unacar');

$query= "select NumEmpleado from academico where NumEmpleado LIKE '%$key%'"; 
$res = mysqli_query($conn, $query);

if($res->num_rows>0)
while($row = $res->fetch_assoc())
$NumEmpleado[trim($row["NumEmpleado"])] = null;


echo json_encode($NumEmpleado);
flush();
?>

I have noticed this things so far:

When I press space bar on the input field while looking at console, the json data is exactly as the data on the DB

When I press 1, which should give me the '31' as the only autocomplete option, it shows 2 options and this are not from the JSON data and for some reason, it tries to show a image(src: uknown).

Also tries to load some stuff

If I type 9, it should give me 3 options; 9, 93, and 98

And again, it tries to reach somewhere.

Thank you for reading, have a good day.

Jquery autocomplete accept fix key and value (label and value) during initialization. So, first of all, you have to convert your result to the specific key value like below.

 $(document).ready(function()
 $( "#tags" ).autocomplete(
 source: function(request, response) 
 $.ajax(
 url: 'suggest.php?key=' + $('#text_box_id').val(),
 dataType: "json",
 type: "GET",
 contentType: "application/json; charset=utf-8",
 success: function (data) 
 response($.map(data.d, function (item) 
 return 
 label: item[0],
 val: item[1]
 
 ))
 
 );
 
 );
 );

It might help you.