Die Formatierung der jQuery UI zum automatischen Vervollständigung Ergebnisse in einer Tabelle

Question

Ich verwende jetzt http://jqueryui.com/demos/autocomplete/ basierend auf einigen früheren Empfehlungen und es funktioniert gut für mich.

Ich bin auf der Suche, die Ergebnisse in der Auto-kompletten Liste in einer Tabelle zu formatieren. Gerade jetzt meine Ergebnisse sind so etwas wie:

Last name, first name - id number - status code

Wenn es eine Liste von Namen nichts Linien schön

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

Ich möchte irgendwie bekommen

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

Ist das möglich? Ich bin derzeit eine json Datenquelle verwendet, wo ich ein ‚Etikett‘ habe, ‚Wert‘ und ‚id‘ Array, das ist:

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

Das Label in dem Drop-Down zu sehen ist, ist der Wert, was das ursprünglichen Textfeld zurückgegeben wird und die ID ist, was Rückkehr zu einem versteckten Feld ist.

Ich habe kein Glück des Arrays auf das Etikett an einigen divs versucht zu mischen. Die Spanne in der Bezeichnung für inaktive User funktioniert gut für mich, aber ich kann die Breite einer Spanne auf eine feste Breite nicht festgelegt.

Gibt es etwas, was ich tun kann?

Answer 1

Haben Sie überhaupt daran gedacht mit einer fixen mit Schrift (Kurier, vielleicht) und dann Ihren Namen Halbbildauffülleinheit?

Das sollte die Dinge Linie auf den Punkt. So etwas wie:

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

Dann einfach Pad der Nachname, Vorname mit der berechneten Menge und Dingen soll in einer Reihe aufstellen.

Answer 2

Ich denke, das Ihnen helfen kann, hier ist die 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;
    }
})
});

Sie können diese Besuche Geige

Dies könnte helfen zu Geige