[英]Formatting the jQuery UI autocomplete results in a table
我现在根据先前的一些建议使用http://jqueryui.com/demos/autocomplete/ ,它对我来说效果很好。
我想在表格的自动完成列表中格式化结果。 现在我的结果是这样的:
Last name, first name - id number - status code
当有名字列表时,没有很好的排列
Name - ID - Status
Brown, Charlie - 2 - A
Jones, Henry - 3 - I
我想以某种方式
Name ID Status
Brown, Charlie 2 A
Jones, Henry 3 I
这可能吗? 我目前正在使用json数据源,其中有一个'label','value'和'id'数组,即:
{"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"}
标签在下拉列表中可见,值是返回到原始文本框的值,id是返回到隐藏字段的值。
我尝试在某些div中混合到数组的标签部分,但是没有运气。 非活动用户标签中的跨度对我来说效果很好,但是我无法将跨度的宽度设置为固定宽度。
有什么我可以做的吗?
您是否考虑过使用固定字体(例如快递),然后填充名称字段?
那应该很好地安排一切。 就像是:
$maxWidth = 30;
$nameWidth = strlen(lastname) + strlen(firstname) + 2 //don't forget the comma and space
$padding = $maxWidth - $nameWidth;
然后只需用计算出的数量填充姓氏,名字,然后所有内容都应对齐。
我认为这可以为您提供帮助,这是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;
}
})
});
你可以看看这个小提琴
这可能帮助过小提琴
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.