Question

I am having a weird problem with the autocomplete UI. I have searched on here and I cannot find anything similar.

http://jsfiddle.net/TYPfw/ has the jquery and the HTML, here is the PHP.

$return_arr = array();
$param = mysql_real_escape_string($_GET['term']);
$fetch = mysql_query("SELECT * FROM customers WHERE company like '%$param%'"); 
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
    $row_array['id'] = $row['id'];
    $row_array['company'] = $row['company'];

    array_push($return_arr,$row_array);
}

echo json_encode($return_arr);

The JSON comes out correctly, and when you type the first letter of a correct value, a TINY little (2px box) shows up under the input box, but if you type in something that doesnt exsist in the db, it goes away, but comes back when you are typing something that is.

I have used this similar code in many other projects and I have never run into this issue. Any thoughts about what I am missing? Been looking at this for too long for such a small task.

Image of box for reference.
https://i.stack.imgur.com/A8wnz.jpg

Answer 1

Sorry for my previous answer, I didn’t see the jsFiddle when I first read your question.

The problem is that you’re not setting a value for the label property of the return array. The autocomplete functionality is expecting an array that contains objects that are either straight strings (["item1", "item2", "item3"]) or have a label property. The underlying autocomplete code uses the label property to know what to display. Check out jQuery-ui’s custom-data example to get a better idea of how your json ojbect should be formatted: http://jqueryui.com/demos/autocomplete/#custom-data

Currently, your returned JSON would look something like this:

[
  { id: "companyId", company: "company Name" },
  { id: "AnotherID", company: "another company" }
]

However, you objects don’t have a label property. Changing your PHP to set the label (instead of company) as follows should fix the list not populating:

$return_arr = array();
$param = mysql_real_escape_string($_GET['term']);
$fetch = mysql_query("SELECT * FROM customers WHERE company like '%$param%'"); 
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
    $row_array['id'] = $row['id'];
    $row_array['label'] = $row['company'];

    array_push($return_arr,$row_array);
}

echo json_encode($return_arr);

And, you’ll want to update your javascript to account for the new format:

$(function() {
    $("#company").autocomplete({
        source: "bin/view_customers.php",
        minLength: 1,
        select: function(event, ui) {
            $('#id').val(ui.item.id);
            $('#company').val(ui.item.label);
        }
    });
});