How to call the completeMethod with arrow down key in autoComplete?

Question

I have this autoComplete method in my Primefaces view:

<p:autoComplete id="productId" class="tg"  
completeMethod="#{productController.completeProductName}" converter="productConverter"
forceSelection="true" value="#{myController.selected.productId}"
scrollHeight="200" queryDelay="1000" var="product" itemValue="#{product}" itemLabel="#{product.name}"
inputStyleClass="biggerText boldText">
    <f:validator validatorId="onSubmitValidator"/>
    <f:attribute name="onSubmitRequired" value="true"/>
    <f:attribute name="onSubmitRequiredMessage" value="#{bundle.CreateProductRequiredMessage_productId}"/>
    <p:ajax event="itemSelect" listener="#{myController.changeProduct()}" resetValues="true" update="@form"/> 
</p:autoComplete>

I want to accomplish this: if the user presses the arrow down key, he gets the complete product list. Sadly the completeMethod isn't fired if I press this button and I don't know if I can do this via p:ajax event somehow...

Is this possible, if yes, how?

EDIT.:

Jasper de Vries suggested to use Client Side API. This is my first try with that:

<script type="text/javascript">
jQuery("##{formType}EditForm\\:productId_input").keyup(function(e) {
        if(e.which == 40 || e.keyCode == 40)
        {
            PF('yourAutoCompleteWidget').search('complete-list-dropdown');
        }
});
</script>

If you know how/when the autocomplete is triggered (the source is open), you can add a plain javascript (or jquery) eventlistener on the component somehere and fake the other event. — Kukeltje, Jul 25 '19 at 09:50
I have same requirement in angular where we have used prime-ng autocomplete module. Did u got any solution for triggering call on down-key press. — Gajanan Kolpuke, Sep 17 '20 at 11:10

Jasper de Vries · Answer 1 · 2019-07-25T10:23:51.437

1

You can use the client side API to trigger a search. First set the widgetVar name:

<p:autoComplete ...
                widgetVar="myAutoComplete" />

This allows you to use the follow code in JavaScript:

PF('myAutoComplete').search('your query');

How to call the completeMethod with arrow down key in autoComplete?

1 Answers1