Быстрый пример многостолбцовых результатов с новым Автоматическим заполнением jQueryUI?
Я просто узнал, что jQueryUI теперь имеет свое собственное встроенное поле комбинированного списка автоматического заполнения. Большие новости!
К сожалению, следующая вещь, которую я нашел, состоит в том, что создание его многостолбцовый не кажется почти что простым (по крайней мере, с помощью документации).
Существует сообщение здесь, где кто-то упоминает, что они сделали его (и даже дает код), но я испытываю затруднения при понимании того, что делает часть их кода.
Мне просто любопытно, если кто-либо имеет, натыкался на это прежде и мог бы отправить быстрый и легкий образец создания многостолбцового набора результатов.
Большое спасибо заранее.
2 ответа
В конце концов я вручную переопределил функции _renderMenu и _renderItem . Пока работает как шарм, и на самом деле было очень сделать легко. Я надеялся на решение «для каждого экземпляра», но мы сожжем этот мост, когда дойдем до него. Вот к чему это пришло, и еще раз спасибо!
$.ui.autocomplete.prototype._renderMenu = function(ul, items) {
var self = this;
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._renderItem( ul.find("table tbody"), item );
});
};
$.ui.autocomplete.prototype._renderItem = function(table, item) {
return $( "<tr></tr>" )
.data( "item.autocomplete", item )
.append( "<td>"+item.id+"</td>"+"<td>"+item.value+"</td>"+"<td>"+item.cp+"</td>" )
.appendTo( table );
};
$("#search").autocomplete({
source: [
{id:1,value:"Thomas",cp:134},
{id:65,value:"Richard",cp:1743},
{id:235,value:"Harold",cp:7342},
{id:982,value:"Nina",cp:21843},
{id:724,value:"Pinta",cp:35},
{id:78,value:"Santa Maria",cp:787}],
minLength: 1
});
В сообщении, на которое вы ссылаетесь, используется обратный вызов для источника вместо URL-адреса. Важной частью этого является обратный вызов успеха функции ajax. Он принимает ответ от сервера и сопоставляет его с объектом, который ожидает получить автозаполнение: {label: '', value: ''} . В этом примере они устанавливают метку (которая отображается в меню) на HTML, который они хотят отобразить.
Если вы посмотрите на источник автозаполнения, фактическая визуализация каждого элемента обрабатывается _renderItem, каждая метка оборачивается , а затем добавляется к элемент.
Если то, что вы хотите сделать, не может быть выполнено путем установки метки элемента на любой HTML-код, который вы хотите отобразить, вы можете попробовать выполнить monkeypatch, как описано здесь .
Разместите часть своего кода, и я смогу помочь с более конкретным примером.