La mise en forme des résultats de saisie semi-automatique de l'interface utilisateur jQuery dans un tableau

Question

J'utilise maintenant http://jqueryui.com/demos/autocomplete/ en fonction de certaines recommandations précédentes et cela fonctionne bien pour moi.

Je cherche à formater les résultats dans la liste d'auto-complétion dans une table. En ce moment, mes résultats sont quelque chose comme:

Last name, first name - id number - status code 

Quand il y a une liste de noms rien aligne bien

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

Je voudrais obtenir en quelque sorte

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

Est-ce possible ? J'utilise actuellement une source de données JSON où j'ai un tableau « label », « valeur » et « id » qui est:

{"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'étiquette est visible dans le menu déroulant, la valeur est ce qui est retourné à la zone de texte d'origine et l'ID est ce qui revient à un champ caché.

J'ai essayé de mélanger certaines divs à la partie label de la matrice sans aucune chance. La plage dans l'étiquette pour les utilisateurs inactifs fonctionne correctement pour moi, mais je ne peux pas définir la largeur d'une plage sur une largeur fixe.

Y a-t-il quelque chose que je puisse faire?

Answer 1

Avez-vous pensé à utiliser une police fixe (courrier, peut-être), puis remplir votre champ de nom?

Cela devrait bien s'harmoniser. Quelque chose comme:

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

Ensuite, il suffit pad le nom, prénom avec le montant calculé et les choses devraient aligner.

Answer 2

Je pense que cela peut vous aider, voici les 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; 
    } 
}) 
}); 

Vous pouvez consulter cette fiddle

cela pourrait aider aussi fiddle