Jquery autocomplete not showing dropdown results

Question

I am using a jquery autocomplete but the suggestions or the dropdown list is not showing up.

My Javascript is:

$("#product").autocomplete({
    source: function(request, response){
         $.getJSON('../searchProduct.php', {term: $("#product").val()}, function(data){
            alert(data);
        }, response());
    }

});

and here is my searchProduct.php

$searchTerm = $_GET['term'];
$results = $wpdb->get_results("SELECT * FROM wp_products WHERE productName LIKE '".$searchTerm."%'");   
    foreach ( $results as $products ) {
        $data[] = $products->productName;
    }

echo json_encode($data);

When I alert the data, it prints the array (for example, it shows Pebbe,Kristel,Bunoan).

Is there something wrong with the $data that I'm passing? or is it something else? What could be the problem? Please help. Thank you.

Answer 1

Use it like this, call response with data in the callback

$("#product").autocomplete({
    source: function(request, response){
         $.getJSON('../searchProduct.php', {term: $("#product").val()}, function(data){
            response(data);
        });
    }
});

EDIT: you could also use the request passed in source function like this

$("#product").autocomplete({
    source: function(request, response){
         // request === {term: "the value you typed"}
         // if response you are not parsing the data received then just pass response to getJSON
         $.getJSON('../searchProduct.php', request, response);
    }
});