jquery autocomplete input field nothing happens

Question

I want to implement one autocomplete input field but when I start to insert some text nothing happens, for one sec the "busy circle" shows up and that is all. Here is my code: html>

<div class="products-inv"><?php echo $product_name  ?></div>
<input type="text" id="product_name" name="product_name" />

the first div is test for displaying the php variable value what shows up well

jquery>

jQuery( function() {
function log( message ) {
  jQuery( "<div>" ).text( message ).prependTo( "#log" );
  jQuery( "#log" ).scrollTop( 0 );
}

jQuery( "#product_name" ).autocomplete({
  source: "../route/to/search.php",
  minLength: 2,
  select: function( event, ui ) {
    log( "Selected: " + ui.item.value + " aka " + ui.item.id );
  }
});

} );

and the search.php file content>

$query = 'database data';

$db->setQuery( $query );

$product_name = $db->loadResult();

the error console is empty.

thanks in advice

Answer 1

your server side code does not return the data expected by the plugin.

From the documentations of the jQuery autocomplete plugin about the source option

When a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data

your search.php script must return the items you want to suggest to the user (show up in the autocomplete list )

that is an example:

/*term is a parameter generated by the plugin and contains
 the string the user has typed in the input*/

$_GET['term'] = isset($_GET['term']) ? $_GET['term'] : null;

//manage your own query depending on your database and preferred way for db interactions
//$query = "select product_name from product where product_name like ?";
//$term = "%{$_GET['term']}%";
//$stmt = $mysqli->prepare($query);
//$stmt->bind_param("s", $term);
//$stmt->execute();
//$result = $stmt->get_result();
$autocompleteList = [];
while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
     $autocompleteList[] =  $row['product_name'];        
}
die(json_encode($autocompleteList));