Dar formato a los resultados de autocompletar jQuery UI en una mesa

Question

Ahora estoy usando http://jqueryui.com/demos/autocomplete/ basada en algunas recomendaciones anteriores y que está funcionando bien para mí.

Busco para dar formato a los resultados en la lista de auto-completar en una tabla. En este momento mis resultados son algo como:

Last name, first name - id number - status code

Cuando hay una lista de nombres nada líneas muy bien

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

Me gustaría conseguir alguna manera

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

¿Es esto posible? Actualmente estoy usando una fuente de datos JSON donde tengo una 'etiqueta', 'valor' y la serie 'id' que es:

{"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"}

La etiqueta es visible en el desplegable, el valor es lo que se devuelve a la caja de texto original y la identificación es lo que es el retorno a un campo oculto.

He intentado mezclar en algunos divs a la parte de etiqueta de la matriz sin suerte. El lapso en la etiqueta para los usuarios inactivos funciona bien para mí, pero no puedo establecer la anchura de un lapso de un ancho fijo.

¿Hay algo que pueda hacer?

Answer 1

¿Has pensado en absoluto sobre el uso de un fijo con la fuente (mensajería, tal vez) y luego rellenar el campo Nombre?

Esto debería alinear las cosas muy bien. Algo así como:

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

A continuación, sólo rellenar el apellido, el nombre con la cantidad calculada y las cosas deben estar alineados.

Answer 2

Creo que esto puede ayudar, aquí está el 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;
    }
})
});

Se puede extraer de este violín

Esto podría ayudar también violín