质面自动完成:选择第一个项目上的空格键

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'

如果用户在空格键后输入1，则需要选择1个元素

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。此解决方案不处理粘贴事件，因此无法将粘贴的项转换为选定值。