Primefaces自动完成：选择空格键上的第一项答案

【问题标题】：Primefaces autocomplete: select first item on space keyPrimefaces自动完成：选择空格键上的第一项
【发布时间】：2015-06-05 14:56:15
【问题描述】：

我正在使用<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'

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

【问题讨论】：

是的，这可以通过一些 jquery 实现
好吧，如果可能的话，我该怎么做呢？
开始here，包含大量信息。其次检查自动完成组件的javascript api

标签： jsf primefaces autocomplete

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

【讨论】：