Filtering title surfaces with an enter key does not work

Question

I added a global filter to the data stream. When I press enter, the filter text is not sent to the server for the request. My code is as follows:

<h:form id="searchResultsForm"> <p:dataTable value="#{searchController.resultItems}" var="item" editable="false" id="searchResultsTable" lazy="true" tableStyleClass="viewedHistoryTable" emptyMessage="No items" widgetVar="searchResultsTableVar" currentPageReportTemplate="({startRecord} - {endRecord} of {totalRecords})" paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} {CurrentPageReport}" paginator="true" rows="25" rowsPerPageTemplate="10,25,50,100" rowKey="#{item.abbr}"> <f:facet name="header"> <p:outputPanel> <h:outputText value="Search:" /> <p:inputText id="globalFilter" onkeyup="if (event.keyCode === 13){PF('searchResultsTableVar').filter();}" style="width:150px" placeholder="Filter results"/> </p:outputPanel> </f:facet> <p:column rendered="true"> <h:outputText value="#{item.title}" /> <br /> <h:outputText value="#{item.abbr}" styleClass="searchResultsAbbr" /> </p:column> </p:dataTable> </h:form> 

If I remove the if condition to check the event Enter event code, the filter string is sent to the server each time a key is pressed. Not sure why the client sends an empty string on input. Any ideas?

Answer 1

I would like to share my working code:

 <h:form id="searchResultsForm"> <p:dataTable value="#{searchController.resultItems}" var="item" editable="false" id="searchResultsTable" lazy="true" tableStyleClass="viewedHistoryTable" emptyMessage="No items" widgetVar="searchResultsTableVar" currentPageReportTemplate="({startRecord} - {endRecord} of {totalRecords})" paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} {CurrentPageReport}" paginator="true" rows="25" rowsPerPageTemplate="10,25,50,100" rowKey="#{item.abbr}" selectionMode="single" selection="#{searchController.currItem}"> <f:facet name="header"> <h:panelGroup> <p:outputPanel style="padding-bottom: 4px;"> <p:inputText id="globalFilter" onchange="PF('searchResultsTableVar').filter();" style="width:60%;" placeholder="Filter results"/> <p:commandButton id="Search" value="Search" process="@this" update="@this" style="font-size: 0.8em;"/> </p:outputPanel> </h:panelGroup> </f:facet> <p:column rendered="true"> ...... </p:column> </p:dataTable> </h:form> 

Answer 2

You can just use the jquery attachment, so remove the "onkeyup" completely.

 $(document).ready(function() { $('#globalFilter').keypress(function(event) { if ((event.keyCode || event.which) == 13) { PF('searchResultsTableVar').filter(); } }); }); 

Tested here: http://jsfiddle.net/Zcfga/3/