I often have the problem that the autosuggest isn’t flexible enough, and I need to show contact name AND client name in the drop down
Here is a way you can ‘hack’ the default set up:
$.ui.autocomplete.prototype._renderItem = function(ul, item) { var new_string = "<div style='width:450px;'> <div style='width:200px; float:left;'>" + item.contactname + " </div> <div>" + item.companyname + "</div></div>"; return $("<li></li>") .data("item.autocomplete", item ) .append("<a>" + new_string + "</a>") .appendTo(ul); };
Now, obviously the function that returns the data for the autosuggest needs to have these new fields in it (companyname, etc), a bit like this:
foreach ($data as $row) { $array[] = array( "value" => $row['contactname'], "companyname" => $row['companyname'], "contactname" => $row['contactname'], "contactID" => $row['contactID'] ); } echo json_encode($array);
EASY