Форматирование результатов автозаполнения пользовательского интерфейса jQuery в таблице - PullRequest
Новая
       8

Форматирование результатов автозаполнения пользовательского интерфейса jQuery в таблице

1 голос
/ 05 мая 2010

Я сейчас использую 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"}

Метка отображается в раскрывающемся списке, значение - это то, что возвращается в исходное текстовое поле, а идентификатор - это то, что возвращается в скрытое поле.

Я безуспешно пытался смешать несколько элементов div с меткой части массива. Интервал в метке для неактивных пользователей работает нормально для меня, но я не могу установить ширину диапазона фиксированной ширины.

Могу ли я что-нибудь сделать?

Ответы [ 2 ]

1 голос
/ 13 мая 2010

Вы когда-нибудь задумывались об использовании фиксированного шрифта (может быть, курьера), а затем добавили свое имя?

Это должно хорошо сочетаться. Что-то вроде: 

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

Затем просто добавьте фамилию, имя с вычисленной суммой, и все должно совпадать.

0 голосов
/ 28 апреля 2014

Я думаю, что это может помочь вам, вот 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;
    }
})
});

Вы можете проверить это скрипка

это тоже может помочь скрипка

...