javascript - Primefaces AutoComplete 客户端和外观变化

Question

我正在使用 Primefaces 3.5 和 jsf 2.0。我有一个数据表，其中有一列包含所有行中的 multiple = "true" 自动完成组件。数据表的每一行都有用于行选择的复选框。表外还有一个自动完成组件(称为组组件)。每当组组件中的值发生变化时，相同的值应该出现在表中选定行的所有自动完成组件中。为此，我只想更改客户端表内自动完成组件的值。我面临的两个问题:

1.当multiple="true"时，如何在javascript中设置/获取自动完成组件的值？我可以使用 $(autocomplete).input.val(); 设置/获取 mulitple="false" 但无法找到 mulitple = "true"

更新:我发现当 mulitple ="true" 使用 $(autocomplete).hinput.val() 时可以获取值。但我仍然找不到如何设置这些值。

2 如何在 multiple = "true"时更改自动完成功能的 ui 外观。我的 table 空间有限。所以我想显示所有用逗号分隔的值。当前，如果宽度固定，则该值是垂直的。这会增加行的高度，使表格看起来很难看。

Answer 1

如评论中所述，为了设置值，您可以使用以下内容，基于 this :

 $this = PF('autoCompleteWV');// or if you use 3.5 and older use autoCompleteWv without PF shortcut
 var itemDisplayMarkup = '<li data-token-value="' + item.attr('data-item-value') + '"class="ui-autocomplete-token ui-state-active ui-corner-all ui-helper-hidden">';
 itemDisplayMarkup += '<span class="ui-autocomplete-token-icon ui-icon ui-icon-close" />';
 itemDisplayMarkup += '<span class="ui-autocomplete-token-label">' + item.attr('data-item-label') + '</span></li>';

  $this.inputContainer.before(itemDisplayMarkup);
  $this.multiItemContainer.children('.ui-helper-hidden').fadeIn();
  $this.input.val('').focus();

  $this.hinput.append('<option value="' + itemValue + '" selected="selected"></option>');

现在要清空自动完成，您可以使用以下基于 this 的内容:

PF('autoCompleteWV').jq.find('.ui-icon-close').click();

要更改自动完成标签或标记的样式，您可以在此类上应用修改

.ui-autocomplete-token