Add onkeyup event on datatable filter

Question

I would like to add javascript event on this code:

<p:dataTable id="tblQueues" var="q" value="#{gateBacking.listQueue}" filteredValue="#{gateBacking.filteredQueues}" rowKey="#{q.queid}"  
     selection="#{gateBacking.selectedQueue}" selectionMode="single" widgetVar="varQueues"
     scrollable="true" scrollHeight="250">  
    ...
    <p:column headerText="License No" filterBy="#{q.fleet.licenseNo}" filterMatchMode="contains" >
        #{q.fleet.licenseNo}
    </p:column>
    ...
</p:dataTable> 

How can I add onkeyup on the filter? I have tried like this:

<p:column headerText="License No" filterBy="#{q.fleet.licenseNo}" filterMatchMode="contains" onkeyup="formatLicense(this)">

but it doesn't work. How can I do that? Thanks.

---

UPDATE

I have tried this but it doesn't work:

<p:column headerText="License No" filterBy="#{q.fleet.licenseNo}" filterMatchMode="contains" filterEvent="formatLicense(this)">

---

UPDATE 2

<p:tabView id="tabViewGate">
    <p:tab id="tabCheckOut" title="Out">
        <h:form id="frmOut">
            <p:dataTable id="tblQueues" var="q" value="#{gateBacking.listQueue}" filteredValue="#{gateBacking.filteredQueues}" rowKey="#{q.queid}"  
                selection="#{gateBacking.selectedQueue}" selectionMode="single" widgetVar="varQueues"
                scrollable="true" scrollHeight="250">  
                ...
                <p:column id="colLicnu" headerText="License No" filterBy="#{q.fleet.licenseNo}" filterMatchMode="contains" >
                    #{q.fleet.licenseNo}
                </p:column>
                ...
            </p:dataTable> 

            <script type="text/javascript">
                $(document).ready(function(){
                    $("#frmOut\\:tblQueues\\:colLicnu\\:filter").keyup(function(){
                        //alert("Test"); //--> I tried this too but it doesn't work
                        if (input.value.length > 1)
                        {
                            var num = '1234567890';
                            var str = input.value[input.value.length-1];
                            var str2 = input.value[input.value.length-2];

                            if (num.indexOf(str) >= 0) {
                                if (!(num.indexOf(str2) >= 0)) 
                                    input.value = input.value.substring(0, input.value.length - 1) + " " + str;
                            }
                            else if (!(num.indexOf(str) >= 0)) {
                                if (num.indexOf(str2) >= 0)
                                    input.value = input.value.substring(0, input.value.length - 1) + " " + str;
                            }
                        }
                        input.value = input.value.replace("  "," ").toUpperCase();
                    });
                });
            </script>

        </h:form>
    </p:tab>
</p:tab>

Answer 1

You can achieve this with some jQuery magic. I was using PrimeFaces 3.5 to determine this answer but you should be able to achieve the same thing on yours. The first thing you'll need to do is to determine the generated id for the input on the HTML side. You can do so by right clicking on the input (the one used to filter for that column) and choose View Source.

Note: I found it easier to simply add an id to <h:form>, <dataTable> and the <p:column> you're interested in (or you can do prependId = "false" on <h:form> to shorten it...whatever you wish). Then use this javascript (pseudocode) code .

$(document).ready(function(){
  $("#inputTextId").keyup(function(){
    //logic goes here. 
  });
});

Here's a more concrete example. Below is a portion of my <p:dataTable>. I'm only showing the relevant parts. (Don't worry about the objects, I was playing with the PrimeFaces showcase).

<h:form id="form">
    <p:dataTable id="dataTable" var="car" value="#{carBean.cars}" widgetVar="carsTable">
        <p:column id="modelColumn" filterBy="#{car.model}" headerText="Model" filterMatchMode="contains">
            <h:outputText value="#{car.model}" />
        </p:column>

The generated id for the input was form:dataTable:modelColumn:filter

My javascript code.

$(document).ready(function(){
  $("#form\\:dataTable\\:modelColumn\\:filter").keyup(function(){
    alert("Test"); 
  });
});

On my end this code was located under resources/javascript/jscript.js. So remember to add <h:outputScript name="javascript/jscript.js" /> in <h:head>.

UPDATE

Whatever the id is for the input copy and paste all of it. Then escape the colons : with double backslashes. From your code given it should be

#tabViewGate\\:frmOut\\:tblQueues\\:colLicnu\\:filter

However, from your comments you're saying that the id is

A5290:tabViewGate:frmOut:tblQueues:colLicnu:filter 

so it should be

#A5290\\:tabViewGate\\:frmOut\\:tblQueues\\:colLicnu\\:filter