Formatting the jQuery UI autocomplete results in a table

Question

I'm now using http://jqueryui.com/demos/autocomplete/ based on some previous recommendations and it's working well for me.

I am looking to format the results in the auto-complete list in a table. Right now my results are something like:

Last name, first name - id number - status code

When there is a list of names nothing lines up nicely

Name - ID - Status
Brown, Charlie - 2 - A
Jones, Henry - 3 - I

I'd like to somehow get

Name             ID  Status
Brown, Charlie   2   A
Jones, Henry     3   I

Is this possible? I'm currently using a json datasource where I have a 'label', 'value' and 'id' array that is:

{"label":"Brown, Charlie - 2 - A","value":"Brown, Charlie","id":"2"}
{"label":"<span style="color: red;">Jones, Henry - 3 - I</span>","value":"Brown, Charlie","id":"2"}

The label is visible in the drop-down, the value is what is returned to the original text box and the id is what is return to a hidden field.

I've tried mixing in some divs to the label part of the array with no luck. The span in the label for inactive users works fine for me but I can't set the width of a span to a fixed width.

Is there anything I can do?

Answer 1

Have you thought at all about using a fixed with font (courier, maybe) and then padding your name field?

That should line things up nicely. Something like:

$maxWidth = 30;
$nameWidth = strlen(lastname) + strlen(firstname) + 2  //don't forget the comma and space
$padding = $maxWidth - $nameWidth;

Then just pad the last name, first name with the calculated amount and things should line up.