Autocomplete Not Showing Results That Are Returned

Question

I cannot get the results of a jquery 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. Any suggestions on what the problem is.

Thanks, AB

Answer 1

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;
}

Answer 2

I have the same problem. For me solution is to set z-index to higher value like this

.ui-autocomplete
{
    position:absolute;
    cursor:default;
    z-index:1001 !important
}

Some elements hide autocomplete form. (in my app)