We have the following problem. We're migrating from Richfaces to Primefaces. Here is the code from the Richfaces implementation:
<h:panelGrid
columns="3"
cellspacing="0"
cellpadding="0">
<h:inputText
id="inpID"
converter="inpConverter"
value="#{session.a}"
valueChangeListener="#{session.sthChanged}"
onfocus="someFunctionA();"
onblur="someFunctionB();" />
<h:commandLink
action="#{session.redirectToSite()}"
styleClass="targetButton align-middle" />
<rich:suggestionbox
id="inpSuggest"
for="inpID"
frequency="1"
minChars="0"
var="result"
status="noStatus"
fetchValue="#{result}"
suggestionAction="#{manager.autocomplete}">
<a4j:ajax
event="select"
listener="#{session.setSthAndRedirect(result)}"
execute="@this" />
<f:facet name="nothingLabel">
<h:outputText value="No match found!" />
</f:facet>
<h:column>
<h:outputText value="#{result.x}" />
</h:column>
</rich:suggestionbox>
</h:panelGrid>
Until now I have the following in Primefaces:
<h:panelGrid
columns="3"
cellspacing="0"
cellpadding="0">
<h:inputText
id="inpID"
converter="inpConverter"
value="#{session.a}"
valueChangeListener="#{session.sthChanged}"
onfocus="someFunctionA();"
onblur="someFunctionB();" />
<h:commandLink
action="#{session.redirectToSite()}"
styleClass="targetButton align-middle" />
<p:autoComplete
id="inpSuggest"
placeholder="#{session.a}"
completeMethod="#{manager.autocomplete}"
var="result"
itemValue="#{result}"
queryDelay="4000"
emptyMessage="No match found!"
converter="inpConverter">
<p:ajax
event="itemSelect"
listener="#{session.setSthAndRedirect}" />
<p:column>
<h:outputText value="#{result.x}" />
</p:column>
<s:convertEntity />
</p:autoComplete>
</h:panelGrid>
Now here comes the problem. Richfaces had a nice feature resp. attribute 'for' that nested the suggestionbox into the h:inputText. How can I do the same with Primefaces? Because both components on their onw work (i.e., the suggestion and redirection works as well as when entering something into the h:inputText and pressing enter) but I did not find a way to nest them as in Richfaces.
When using the autocomplete from Primefaces the selection via the entered input does not work, e.g.: User types something in 1 second and wants to press enter --> this is not possible and what we want to achieve.
Any help is highly appreciated.
Best regards
I found a solution (via JS and p:remoteCommand):
<p:autoComplete
[...]
onkeyup="doSomething(event);"
[...] >
[...]
</p:autoComplete>
<p:remoteCommand
name="doRemote"
immediate="true"
actionListener="#{session.doIt}"
style="display: none;" />
<script type="text/javascript">
function doSomething(e) {
var val = document.getElementById("someId");
e = e || window.event;
if(e.keyCode == 13) {
doRemote([{name:'enteredValue', value:val.value}]);
return false;
} else {
return true;
}
}
</script>