jsf.ajax.request无法完全正常运行

Question

I am attempt to make a custom autocomplete box but I am having some trouble. Right now I have an input that calls this function on keydown

 function pingAutoComplete(event)
 {
    console.log("pingAutoComlete Called");
    window.clearTimeout(window.keyTimeout);


     //Wait 2 seconds before we attempt to pingAutoComplete incase user has not finished typing
      window.keyTimeout = setTimeout(function() {
       jsf.ajax.request(event, "keydown", {execute:'searchTerm',render:'autoCompletePanel'})
       autoCompleteLayoutPanel.show();
       return false;
    }, 2000);
    return false;

 }

The auto complete panel contains a bunch of selects that look like this

<h:selectOneListbox id="vehicleResult" title="Vehicles"
    value="#{searchBean.searchTerm}"
    converter="entityConverter"
    required="false"
    rendered="#{!searchBean.filterAutoComplete().isEmpty()}">

    <f:selectItems value="#{searchBean.filterAutoComplete()}"
        var="searchItem" itemValue="#{searchItem}"
        itemLabel="#{searchItem.displayString}"
        itemLabelEscaped="true" />
</h:selectOneListbox>

Now when the javascript is called it seems to be hitting searchBean.filterAutoComplete() on the back end, but it is not actually updating the select list in the gui. Anyone know why?

Answer 1

You have to specify the exact client ID. That is the value of the id attribute of the generated HTML element, not of the JSF component itself. If the JSF components are placed in a <h:form> , then the client ID will by default be prepended with its ID.

Thus the following panelgroup

<h:form id="form">
    <h:panelGroup id="autoCompletePanel">

will have a client ID of form:autoCompletePanel . You need to specify exactly that ID in the render attribute. The same rules also applies to execute by the way.