格式化jQuery UI自动完成术在表中结果
-
03-10-2019 - |
题
我现在正在使用 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 DataSource,其中我具有“标签”,“值”和“ 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是返回隐藏字段的内容。
我尝试在没有运气的情况下将一些divs混合到阵列的标签部分。非活动用户标签中的跨度对我来说很好,但是我无法将跨度的宽度设置为固定宽度。
有什么我能做的吗?
解决方案
您是否考虑过使用固定的字体(也许是快递)然后填充您的名称字段?
那应该很好地排队。就像是:
$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;
}
})
});
你可以检查一下 小提琴
这也可能会有所帮助 小提琴
不隶属于 StackOverflow