Primefaces 自动完成：select 第一项 space 键

Question

我正在使用 <p:autoComplete multiple="true" ... /> primefaces 组件。

我希望每次用户按下 space 键时，下拉列表中的第一项都会添加到所选项目列表中。

可能吗？

form.xhtml

<p:autoComplete
    value="#{userBean.addSelectedRepositories}"
    completeMethod="#{userBean.onCompleteRepository}"
    itemLabel="#{r.path}"
    itemValue="#{r}"
    var="r"
    converter="entityConverter"
    forceSelection="false"
    multiple="true"
    >
    <p:column>
        <h:outputText value="#{r.path}" />
    </p:column>
</p:autoComplete>

UserBean.java

public List<Repository> onCompleteRepository(String query) {
    return repositoryService.search(query);
}

例如，项目是 'one', 'two', 'three'

如果用户输入一个然后按 space 键，我需要选择一个元素。

Answer 1

这就是我最终得到的解决方案：

<p:autoComplete
    value="#{userBean.addSelectedRepositories}"
    completeMethod="#{userBean.onCompleteRepository}"
    itemLabel="#{r.path}"
    itemValue="#{r}"
    var="r"
    converter="entityConverter"
    forceSelection="false"
    multiple="true"
    widgetVar="autocomplete"
    >
    <p:column>
        <h:outputText value="#{r.path}" />
    </p:column>
</p:autoComplete>

然后我在页面末尾添加了一点javascript：

<script type="text/javascript">
jQuery( document ).ready(function($) {
    $('input[aria-autocomplete=listbox]').keyup(function(e) {
        var k = (e.keyCode ? e.keyCode : e.which);
        if (k == 32) {
            if (PF('autocomplete').items.length > 0) {
                PF('autocomplete').items.filter('.ui-state-highlight').trigger('click');
            }
            e.preventDefault();
        }
    });
});
</script>

解决方案并不完美，因为我将组件名称放在我的 javascript 中。而且此解决方案不处理粘贴事件，因此我无法将粘贴的项目转换为选定值。

Primefaces 自动完成：select 第一项 space 键

Primefaces autocomplete: select first item on space key

jsf

autocomplete

primefaces