jqueryautocompletejquery-ui-autocomplete

Autocomplete Not Showing Results That Are Returned


I cannot get the results of a jQuery UI autocomplete to show, although the php code returns json results. The jquery code is as follows:

$("#newName").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: root + "/assets/php/autocomplete.php",
            dataType: "json",
            data: {
                term : request.term,
                field : "name"
            },
            success: function(data) {
                response(data);
            }
        });
    });

The php code is:

while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
    $row_array['value'] = $row[$field];
    array_push($return_arr,$row_array);
}

echo json_encode($return_arr);

When checking the results in Firebug, I get a response such as:

[{"value":"jdoe"}]

However, I never see a list of suggestions showing in the html page.


Solution

  • I fixed the problem by adding to my master css file a z-index style for the autocomplete. Everything now works properly.

    .ui-autocomplete {
    z-index: 100;
    }