Completing autocomplete: how to set focus on autocomplete after clicking on a command link

Question

Scenario: I used the component and infront autcomplete. I used one command link with image for search.

My goal is to display the cursor in autocomplete after clicking on the command link.

My code is as follows:

Autofill

<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

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

Is there any solution to this problem?

Answer 1

The identifier that you use to get the DOM element for the input focus is incorrect. First of all, you should consider the form identifier. In addition, the input identifier p:autoCompletehas a suffix _input. So use this:

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

process="@this" commandButton, autoComplete.

Answer 2

, CSS jquery ( Primefaces), .

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

*styleClass="focusme"*
/>

:

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