Formattazione dei risultati del completamento automatico jQuery UI in una tabella

Question

Ora sto utilizzando http://jqueryui.com/demos/autocomplete/ base su alcune raccomandazioni precedenti e sta funzionando bene per me.

Sto cercando di formattare i risultati nella lista di completamento automatico in una tabella. In questo momento i miei risultati sono qualcosa come:

Last name, first name - id number - status code

Quando v'è una lista di nomi linee niente piacevolmente

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

Mi piacerebbe ottenere in qualche modo

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

È possibile? Attualmente sto usando un datasource JSON dove ho un 'label', 'valore' e la matrice 'id' che è:

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

L'etichetta è visibile nel menu a discesa, il valore è quello che viene restituito alla casella di testo originale e l'identificazione è ciò che è il ritorno ad un campo nascosto.

ho provato mescolando in alcuni div alla parte dell'etichetta della matrice senza fortuna. L'arco in etichetta per gli utenti inattivi funziona bene per me, ma non riesco a impostare la larghezza di un arco ad una larghezza fissa.

C'è qualcosa che posso fare?

Answer 1

Hai pensato a tutto sull'utilizzo di un fisso con font (corriere, forse) e quindi imbottitura vostro campo nome?

Questo dovrebbe allineare le cose bene. Qualcosa di simile:

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

Poi basta riempire il cognome, il nome con l'importo calcolato e le cose dovrebbero allinearsi.

Answer 2

Credo che questo può aiutare, ecco i 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;
    }
})
});

È possibile controllare questo violino

Questo potrebbe aiutare anche violino