Question

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

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

有可能吗？

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'

如果用户输入一个后跟空格键，我需要选择一个元素。

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自动完成：选择空格键上的第一个项目

1 个答案: