Javascript 在表格中格式化jQuery UI自动完成结果

我现在使用基于一些以前的建议，它的工作对我很好

我希望在表格的自动完成列表中格式化结果。现在我的结果是：

Last name, first name - id number - status code

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

当有一个名字列表时，没有任何东西能很好地排列在一起

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

我想以某种方式

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

这可能吗？我目前正在使用一个json数据源，其中我有一个“标签”、“值”和“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"}

{“label”：“Brown，Charlie-2-A”，“value”：“Brown，Charlie”，“id”：“2”}
{“标签”：“琼斯，亨利-3-I”，“价值”：“布朗，查理”，“身份证”：“2”}

标签在下拉列表中可见，值是返回到原始文本框的值，id是返回到隐藏字段的值

我尝试在数组的标签部分混入一些div，但没有成功。 非活动用户标签中的跨距对我来说很好，但我无法将跨距的宽度设置为固定宽度

---

我能做些什么吗？

你有没有想过使用固定字体（可能是courier），然后填充你的姓名字段

这应该会把事情安排得很好。 比如：

Last name, first name - id number - status code

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

---

然后用计算出的金额填上姓、名，事情就应该排好了。

你有没有想过使用固定字体（可能是courier），然后填上你的姓名字段

这应该会把事情安排得很好。 比如：

Last name, first name - id number - status code

$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&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;
    }
})
});

$（函数（）{
//重写jquery-ui.autocomplete.js函数
$.ui.autocomplete.prototype.\u renderMenu=函数（ul，项）{
var self=这个；
//表定义
ul.附加（“ID#NameCool Points”）；
$。每个（项目、功能（索引、项目）{
自提交数据（ul，ul.find（“表格正文”），项目）；
});
};
$.ui.autocomplete.prototype.\u renderItemData=函数（ul、表格、项目）{
返回此.renderItem（表，项）.data（“ui自动完成项”，项）；
};
$.ui.autocomplete.prototype.\u renderItem=函数（表，项）{
返回$（“”）
.data（“item.autocomplete”，item）
.append（“+item.id+++item.value+++item.cp+”）
.附录（表）；
};
//随机json值
var项目=[
{id:1，值：“Thomas”，cp:134}，
{id:65，value:“Richard”，cp:1743}，
{id:235，值：“Harold”，cp:7342}，
{id:78，值：“圣玛丽亚”，cp:787}，
{id:75，值：“枪手”，cp:788}，
{id:124，值：“Shad”，cp:124}，
{id:1233，值：“Aziz”，cp:3544}，
{id:244，值：“Buet”，cp:7847}
];
$（“#项目”）.autocomplete({
最小长度：1，
资料来源：项目，
//你也可以为select写东西
焦点：功能（事件、用户界面）{
//console.log（ui.item.value）；
$（“#项目”）.val（ui.item.value）；
$（“#项目id”）.val（ui.item.id）；
$（“#项目说明”）.html（ui.item.cp）；
返回false；
}
})
});

你可以看看这个

---

这可能也有帮助

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

$（函数（）{
//重写jquery-ui.autocomplete.js函数
$.ui.autocomplete.prototype.\u renderMenu=函数（ul，项）{
var self=这个；
//表定义
ul.附加（“ID#NameCool Points”）；
$。每个（项目、功能（索引、项目）{
自提交数据（ul，ul.find（“表格正文”），项目）；
});
};
$.ui.autocomplete.prototype.\u renderItemData=函数（ul、表格、项目）{
返回此.renderItem（表，项）.data（“ui自动完成项”，项）；
};
$.ui.autocomplete.prototype.\u renderItem=函数（表，项）{
返回$（“”）
.data（“item.autocomplete”，item）
.append（“+item.id+++item.value+++item.cp+”）
.附录（表）；
};
//随机json值
var项目=[
{id:1，值：“Thomas”，cp:134}，
{id:65，value:“Richard”，cp:1743}，
{id:235，值：“Harold”，cp:7342}，
{id:78，值：“圣玛丽亚”，cp:787}，
{id:75，值：“枪手”，cp:788}，
{id:124，值：“Shad”，cp:124}，
{id:1233，值：“Aziz”，cp:3544}，
{id:244，值：“Buet”，cp:7847}
];
$（“#项目”）.autocomplete({
最小长度：1，
资料来源：项目，
//你也可以为select写东西
焦点：功能（事件、用户界面）{
//console.log（ui.item.value）；
$（“#项目”）.val（ui.item.value）；
$（“#项目id”）.val（ui.item.id）；
$（“#项目说明”）.html（ui.item.cp）；
返回false；
}
})
});

你可以看看这个

这可能也有帮助