将JQuery UI自动完成显示为表格
Displaying JQuery UI autocomplete as a table
我使用JQuery UI的自动完成。我有许多值,以及一个关键字的小集合,每个值都分配了一个关键字。我想在一个迷你表中显示每对,其中一个单元格中的关键字和另一个单元格中的值。为此,我重写了_renderItem
,正如文档中提到的那样。然而,当我这样做时,单击一个值(或关键字)实际上没有做任何事情,所以我不能选择任何值。我怀疑这与data("item.autocomplete", item)
不在正确的位置有关。或者我可能需要重写一些更高的函数(_renderMenu
或_suggest
?)
$( "#tags" ).autocomplete({
source: getItems
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( '<table></table>' )
.data( "item.autocomplete", item )
.append( '<tr><td>' + item.keyword + '</td><td> ' + item.value + "</td></tr>" )
.appendTo( ul );
};
我想这可以帮助你,这里是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;
}
})
});
你可以看看这个小提琴
您不能在_renderItem
中创建<table>
来直接呈现项目。该插件使用<ul>
作为菜单项的容器。
您必须坚持使用<li>
元素,并且只能在<li>
中自定义标记,在其中插入您的表元素。
但我个人不会使用表来做这件事。
更新:一天后,我发现一个插件10000倍更好的我的项目背景。选择t2,查看"加载远程数据"示例。
原始回答:
我升级了前面的示例以使用当前的jQuery版本:
jQuery 2.1.4和jQuery UI 1.11.4的例子同时,我改变了这个自动完成作为一个自定义小部件使用,包括键盘导航的支持。
代码:$.widget('custom.tableAutocomplete', $.ui.autocomplete, {
options: {
open: function (event, ui) {
// Hack to prevent a 'menufocus' error when doing sequential searches using only the keyboard
$('.ui-autocomplete .ui-menu-item:first').trigger('mouseover');
},
focus: function (event, ui) {
event.preventDefault();
}
},
_create: function () {
this._super();
// Using a table makes the autocomplete forget how to menu.
// With this we can skip the header row and navigate again via keyboard.
this.widget().menu("option", "items", ".ui-menu-item");
},
_renderMenu: function (ul, items) {
var self = this;
var $table = $('<table class="table-autocomplete">'),
$thead = $('<thead>'),
$headerRow = $('<tr>'),
$tbody = $('<tbody>');
$.each(self.options.columns, function (index, columnMapping) {
$('<th>').text(columnMapping.title).appendTo($headerRow);
});
$thead.append($headerRow);
$table.append($thead);
$table.append($tbody);
ul.html($table);
$.each(items, function (index, item) {
self._renderItemData(ul, ul.find("table tbody"), item);
});
},
_renderItemData: function (ul, table, item) {
return this._renderItem(table, item).data("ui-autocomplete-item", item);
},
_renderItem: function (table, item) {
var self = this;
var $tr = $('<tr class="ui-menu-item" role="presentation">');
$.each(self.options.columns, function (index, columnMapping) {
var cellContent = !item[columnMapping.field] ? '' : item[columnMapping.field];
$('<td>').text(cellContent).appendTo($tr);
});
return $tr.appendTo(table);
}
});
$(function () {
var result_sample = [{
"id": 26,
"value": "Ladislau Santos Jr.",
"email": "klber_moraes@email.net",
"address": "9867 Robert St"
}, {
"id": 14,
"value": "Pablo Santos",
"email": "pablo@xpto.org",
"address": "7540 Moreira Ponte"
}, {
"id": 13,
"value": "Souza, Nogueira e Santos",
"email": null,
"address": "3504 Melo Marginal"
}];
$('input#search_field').tableAutocomplete({
source: result_sample,
columns: [{
field: 'value',
title: 'Name'
}, {
field: 'email',
title: 'E-mail'
}, {
field: 'address',
title: 'Address'
}],
delay: 500,
select: function (event, ui) {
if (ui.item != undefined) {
$(this).val(ui.item.value);
$('#selected_id').val(ui.item.id);
}
return false;
}
});
});
在小提琴给出了很好的例子。
然而,在最新版本的jQuery和jQuery UI升级后,这只是简单地停止工作。不是绝对的,但是jQuery UI现在在菜单焦点上返回一个错误,这很烦人。
jQuery 2.1.3和jQuery UI 1.11.3的示例$(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,
focus: function( event, ui ) {
if (ui.item != undefined)
{
console.log(ui.item.value);
$( "#project" ).val( ui.item.value );
$( "#project-id" ).val( ui.item.id );
$( "#project-description" ).html( ui.item.cp );
}
return false;
}//you can write for select too
/*select:*/
})
});
相关文章:
- 单击按钮-jQuery/JavaScript时显示表格
- 显示表格数据的更多链接
- 基于复选框隐藏/显示表格行
- 如何在按钮单击时显示表格行
- 根据选择显示表格/表单
- 突出显示表格行,根据其列使用不同的颜色
- 在javascript中显示表格而不改变html
- 如何在谷歌地图上显示表格
- 突出显示表格行中项目之间的差异
- 如何突出显示表格HTML5的选定/单击单元格
- 根据垂直和水平标题突出显示表格单元格
- 如何在使用<显示:表格><显示:列>时使表格行可单击
- 从下拉列表中选择所选值后显示表格 (HTML)
- 水平显示表格
- 点击提交按钮Javascript HTML后显示表格数据
- 隐藏/显示表格单元格中的内容
- 用一些背景色突出显示表格行
- 填充在“;显示:表格单元格”;
- 如何在提交时显示表格的结果
- 鼠标悬停时高亮显示表格行