Question

我正在使用JQuery UI的自动完成功能。我有许多值，以及一小组关键字，其中一个分配给每个值。我想在迷你表中显示每一对，关键字在一个单元格中，值在另一个单元格中。为此，我正在覆盖_renderItem，如the documentation中所述。但是，当我这样做时，单击一个值（或关键字）实际上并没有做任何事情，所以我不能选择任何值。我怀疑这与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 );
};

Answer 1

我认为这可以帮助你，这里是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;
    }
})
});

您可以查看此fiddle

Answer 2

您无法在<table>中创建_renderItem来直接呈现项目。该插件使用<ul>作为菜单项的容器。

您必须坚持使用<li>元素，并且只能在<li>中自定义标记，并在其中插入表格元素。

但我个人不会用表来做那件事。你不能简单地使用span元素吗？

Answer 3

小提琴中给出的好例子。

然而，在jQuery和jQuery UI的最新版本升级之后，它只是停止工作。不是绝对的，但是jQuery UI现在在menufocus上返回错误，这非常烦人。

JS Fiddle example with jQuery 2.1.3 and jQuery UI 1.11.3

＆＃13;

$(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,
    
	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:*/
})
});

＆＃13;

Answer 4

更新：在我找到一个插件10000次后，我的项目环境更好一天。 Select2，检查＆＃34;加载远程数据＆＃34;示例

原始答案：

我升级了之前的示例以使用当前的jQuery版本：

JS Fiddle example with jQuery 2.1.4 and 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 UI自动完成显示为表

4 个答案: