Formatting the jQuery UI autocomplete results in a table

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. Righ开发者_运维百科t 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?

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.

I think this can help you,here is the js:

$(function() {
//overriding jquery-ui.autocomplete .js functions
$.ui.autocomplete.prototype._renderMenu = function(ul, items) {
  var self = this;
  //table definitions
  ul.append("<table><thead><tr><th>ID#</th><th>Name</th><th>Cool&nbsp;Points</th></tr></thead><tbody></tbody></table>");
  $.each( items, function( index, item ) {
    self._renderItemData(ul, ul.find("table tbody"), item );
  });
};
$.ui.autocomplete.prototype._renderItemData = function(ul,table, item) {
  return this._renderItem( table, item ).data( "ui-autocomplete-item", item );
};
$.ui.autocomplete.prototype._renderItem = function(table, item) {
  return $( "<tr class='ui-menu-item' role='presentation'></tr>" )
    .data( "item.autocomplete", item )
    .append( "<td >"+item.id+"</td>"+"<td>"+item.value+"</td>"+"<td>"+item.cp+"</td>" )
    .appendTo( table );
};
//random json values
var projects = [
    {id:1,value:"Thomas",cp:134},
    {id:65,value:"Richard",cp:1743},
    {id:235,value:"Harold",cp:7342},
    {id:78,value:"Santa Maria",cp:787},
    {id:75,value:"Gunner",cp:788},
    {id:124,value:"Shad",cp:124},
    {id:1233,value:"Aziz",cp:3544},
    {id:244,value:"Buet",cp:7847}
];
$( "#project" ).autocomplete({
    minLength: 1,
    source: projects,
    //you can write for select too
    focus: function( event, ui ) {
        //console.log(ui.item.value);
        $( "#project" ).val( ui.item.value );
        $( "#project-id" ).val( ui.item.id );
        $( "#project-description" ).html( ui.item.cp );
        return false;
    }
})
});

You can check out this fiddle

this might help too fiddle