javascript 将 JQuery UI 自动完成显示为表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8432204/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Displaying JQuery UI autocomplete as a table
提问by jmhajek
I am using JQuery UI's autocomplete. I have a number of values, as well as a small collection of keywords, one of which is assigned to each value. I would like to display each pair in a mini-table, with the keyword in one cell and the value in the other. To do this, I am overwriting _renderItem, as mentioned in the documentation. However, when I do this, clicking on a value (or a keyword) doesn't actually do anything, so I cannot select any values. I suspect it has something to do with data("item.autocomplete", item)not being in the right place. Or maybe I need to overwrite some other function higher up (_renderMenuor _suggest?)
我正在使用 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 );
};
回答by Momin Al Aziz
I think this can help you,here is the js:
我认为这可以帮助你，这是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;
}
})
});
You can check out this fiddle
你可以看看这个小提琴
回答by Didier Ghys
You cannot create a <table>in the _renderItemto render an item directly. The plugin uses a <ul>as the container for the menu items.
您不能创建一个<table>在_renderItem直接渲染的项目。该插件使用 a<ul>作为菜单项的容器。
You have to stick to using <li>elements and are able only to customize the markup within the <li>, inserting your table element within it.
您必须坚持使用<li>元素，并且只能在 中自定义标记<li>，将您的表格元素插入其中。
But I would personnaly not use a table to do that. Can't you simply use span elements ?
但我个人不会使用桌子来做到这一点。你不能简单地使用 span 元素吗？
回答by Rogerio
Update: one day after i found a plugin 10000 times better for my project context. Select2, check the "loading remote data" example.
更新：一天后，我发现一个插件对我的项目上下文好 10000 倍。选择2，勾选“加载远程数据”示例。
Original answer:
原答案：
I upgraded the previous samples to use the current jQuery versions:
我升级了之前的示例以使用当前的 jQuery 版本：
JS Fiddle example with jQuery 2.1.4 and jQuery UI 1.11.4
带有 jQuery 2.1.4 和 jQuery UI 1.11.4 的 JS Fiddle 示例
Also, i changed this autocomplete to use as a custom widget and included support for keyboard navigation.
此外，我将此自动完成更改为用作自定义小部件并包括对键盘导航的支持。
Code:
代码：
$.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": "[email protected]",
"address": "9867 Robert St"
}, {
"id": 14,
"value": "Pablo Santos",
"email": "[email protected]",
"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;
}
});
});
回答by Keeper
Nice example given in the Fiddle.
在小提琴中给出了很好的例子。
However after the latest versions upgrade of jQuery and jQuery UI that's just simply stopped working. Not absolutely, however jQuery UI now returning an error on menufocus, which is quite annoying.
然而，在 jQuery 和 jQuery UI 的最新版本升级之后，它只是停止了工作。不是绝对的，但是 jQuery UI 现在在 menufocus 上返回一个错误，这很烦人。
JS Fiddle example with jQuery 2.1.3 and jQuery UI 1.11.3
带有 jQuery 2.1.3 和 jQuery UI 1.11.3 的 JS Fiddle 示例
$(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:*/
})
});