在表格中设置jQuery UI自动完成结果的格式

根据以前的一些建议，我现在使用的是http://jqueryui.com/demos/autocomplete/，它对我而言效果很好。在表格中设置jQuery UI自动完成结果的格式

我正在寻找格式在表中的自动完成列表中的结果。现在我的结果是这样的：

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":"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混合到数组的标签部分没有运气。非活动用户的标签范围对我来说工作正常，但我无法将范围的宽度设置为固定宽度。

有什么我可以做的吗？

来源

2010-05-05 Jason

你有没有想过使用固定字体（快递，也许），然后填充你的名字字段？

这应该排列很好。喜欢的东西：

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

然后，只需垫的姓氏，名字与计算量和事物应该排队。

来源

2010-05-13 16:27:32

，我认为这可以帮助你，这里是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; 
    } 
}) 
});

你可以看看这个fiddle

这可能帮助过fiddle

来源

2014-04-28 07:31:30

在表格中设置jQuery UI自动完成结果的格式

回答

相关问题