Question

场景：我使用了autcomplete的组件和infront，我使用了一个带搜索图像的命令链接。

我的目的是在点击commandlink后将光标显示在自动完成中。

我的代码如下：

自动完成：

<p:autoComplete id="senderAutocomplete" widgetVar="senderInfo"
                                                    value="#{customerReviewLazyDataModel.customerReviewVO.senderVO}"
                                                    completeMethod="#{customerReviewLazyDataModel.searchOrganizations}"
                                                    var="senderVO"  
                                                    itemValue="#{senderVO}" converter="organizationConverterForCustomerReview"
                                                    size="60">

commandlink

<p:commandLink oncomplete="setFocus()" ajax="true">
                                                        <p:graphicImage value="/app-resources/themes/yob/images/search.png" style="margin-bottom: -4px;"></p:graphicImage>
                                                    </p:commandLink>

js功能

function setFocus(){
        document.getElementById("senderAutocomplete").focus();
}

这个问题有解决办法吗？

Answer 1

用于获取要聚焦的输入的DOM元素的ID是错误的。首先，您必须考虑表单的ID。此外，p:autoComplete的输入ID具有后缀_input。所以使用这个：

document.getElementById("formId:senderAutocomplete_input").focus();

您还应该在process="@this"上设置commandButton，因为您只是使用它来关注autoComplete。

Answer 2

我解决了这个问题，添加了一个css样式类并使用jquery（包含在Primefaces中）来设置焦点。

<p:autoComplete id="senderAutocomplete" widgetVar="senderInfo" ...

*styleClass="focusme"*
/>

而commandlink就是这样的：

<p:commandLink *oncomplete="$('.focusme').focus()"* ajax="true">

Primefaces自动完成：如何在单击commandlink后将焦点设置为自动完成

2 个答案: