Форматирование автозаполнения 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
Это возможно? В настоящее время я использую DataSource JSON, где у меня есть «метка», «Значение» и «ID» Array:
{"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"}
Этикетка видима в раскрывающемся положении, значение - это то, что возвращается в исходное текстовое поле, а идентификатор - это то, что возвращается в скрытое поле.
Я пробовал смешивание в некоторых девлам до метки частью массива без удачи. Продолжительность на этикетке для неактивных пользователей работает нормально для меня, но я не могу установить ширину диапазона на фиксированную ширину.
Есть ли что-нибудь, что я могу сделать?
Решение
Вы вообще подумали об использовании фиксированного шрифтом (Courier, может быть,), а затем заполнять поле имени?
Это должно быть хорошо выровнено. Что-то типа:
$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;
}
})
});
Вы можете проверить это скрип
Это может помочь тоже скрип