Mise en forme des résultats de la saisie semi-automatique jQuery UI dans une table
-
03-10-2019 - |
Question
J'utilise maintenant http://jqueryui.com/demos/autocomplete/ base sur certaines recommandations antérieures et il fonctionne bien pour moi.
Je cherche à formater les résultats dans la liste complète-automatique 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 des lignes de rien joliment
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 original et l'id est ce qui est le retour à un champ caché.
J'ai essayé le mélange dans certains divs à la partie de l'étiquette du tableau avec pas de chance. La durée de l'étiquette pour les utilisateurs inactifs fonctionne bien pour moi régler mais je ne peux la largeur d'une travée à une largeur fixe.
Est-ce que je peux faire?
La solution
Avez-vous pensé du tout à l'aide d'un fixe avec la police (courrier, peut-être), puis Rembourrage votre champ de nom?
Cela devrait aligner les choses bien. Quelque chose comme:
$maxWidth = 30;
$nameWidth = strlen(lastname) + strlen(firstname) + 2 //don't forget the comma and space
$padding = $maxWidth - $nameWidth;
Alors pad juste le nom, prénom avec le montant calculé et les choses devraient aligner.
Autres conseils
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 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 violon
cela pourrait aider aussi violon