Rich:SuggestionBox Help!!! Not working properly

[jobmathew]

Hi,

Am new into Web development and to richface.

currently am trying to make a suggestion box for an input text.

But the problem is right after the first key press am getting the suggestion values but not in suggestion box.

and no more filtering happens after that. here is my code:

Any help is appreciated.

Thanks in Advance.

Please have a look at the attachment

<h:form id="addUserForm">

            <rich:messages style="color:red;"></rich:messages>

            <h:panelGrid columns="1">

                <a4j:outputPanel  ajaxRendered="true">

                    <rich:panel>

                        <h:panelGrid columns="2">

                            <h:outputText value="User Name" />

                            <h:panelGroup>

                                <h:inputText value="#{manageUserBean.userName}" id="addUserNameTextBox" />

                                  <rich:suggestionbox ajaxSingle="true" for="addUserNameTextBox" nothingLabel="No user found" suggestionAction="#{manageUserBean.autoComplete}" var="suggest" tokens=",">

                                         <h:column>

                                            <h:graphicImage value="/Image/addUser1.png" />

                                        </h:column>

                                         <h:column>

                                            <h:outputText value="#{suggest}" />

                                         </h:column>                                    

                                         <a4j:support ajaxSingle="true" event="onselect" action="#{manageUserBean.fetchUserDetail}" reRender="addUserForm">

                                            <f:setPropertyActionListener value="#{suggest}" target="#{manageUserBean.userName}" />

                                         </a4j:support>

                                  </rich:suggestionbox> 

                              </h:panelGroup>

                             <h:outputText value="System Access level" />

                            <rich:comboBox selectFirstOnUpdate="false" required="true" requiredMessage="Enter Valid Access Group" value="#{manageUserBean.accessGroup}" id="accessGroupComboBox"

                                defaultLabel="Enter Access Level" suggestionValues="#{manageUserBean.accessLevels}">

                            </rich:comboBox>

                            </h:panelGrid>

                    </rich:panel>

                    <rich:panel>

                      <h:panelGrid columns="2">

                            <h:outputText value="First Name" />

                            <h:outputText value="#{manageUserBean.newUser.firstName}" />

                            <h:outputText value="Middle Name" />

                            <h:outputText value="#{manageUserBean.newUser.middleName}" />

                            <h:outputText value="Last Name" />

                            <h:outputText value="#{manageUserBean.newUser.lastName}" />

                            <h:outputText value="Email Name" />

                            <h:outputText value="#{manageUserBean.newUser.email}" />

                      </h:panelGrid>

                    </rich:panel>

                    <rich:message showSummary="true" showDetail="false" for="price" />

                </a4j:outputPanel>

                <h:panelGrid columns="2">

                    <a4j:commandButton value="Add"  action="#{manageUserBean.addUser}"  reRender="table"

                        oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('addUserPanel')}.hide();" />

                    <a4j:commandButton value="Cancel"  immediate="true" action="#{manageUserBean.cancelAddUser}" oncomplete="#{rich:component('addUserPanel')}.hide();"/>

                </h:panelGrid>

            </h:panelGrid>

        </h:form>

[meneghette]

I dont konw if I undestand your problem,

When you type the first value, open the suggestion, but there are no rows ?, there values return from suggestionAction="#{manageUserBean.autoComplete}" ?

Appears "No user found" ?

[jobmathew]

when i write first value, i get the suggestions,

But not on a pop put window (Please see the attachment). and the letter is disappeared from the input box.

now if i enter more letters no filtering is happening. no change is happening to the suggestion box any more 

[nbelaevski]

Hi,

This line: <a4j:outputPanel  ajaxRendered="true"> is the reason for such behavior. You are re-rendering suggestion box in process of list updates, remove ajaxRendered=true and it will work as expected.

[jobmathew]

Thank you for the quick reply,

When i have removed it worked

there was more problem in my code, was using a model pannel to display the ajax status.

when model pannel pop-ups the suggstion box disappeared. since it happend in fraction of second did show up either suggestion box nor the ajax status pannel.

<a4j:status onstart="#{rich:component('wait')}.show()"

                     onstop="#{rich:component('wait')}.hide()" />

                 <rich:modalPanel id="wait" autosized="true" width="200" height="120"

                        moveable="false" resizeable="false">

                     <f:facet name="header">

                        <h:outputText value="Processing" />

                     </f:facet>

                        <h:outputText value="Wait Please..." />

                 </rich:modalPanel>

thank  you for the help and tip....

[nbelaevski]

Modal panel takes focus, thus suggestion box observes 'blur' event and closes suggestions list. So do not use modal panel like that.

[jobmathew]

Thank you for clearing the point.

I have a question, how can i change the culsor of the mouse during ajax status, so that the user has an idea some thing is going on.

is there any way to do this ??

[ilya_shaikovsky]

use a4j:status. use onstart and onstop handlers to redefine cursor style for document.

[jobmathew]

I have done it this way

<a4j:status onstart="document.body.style.cursor='wait'"

                     onstop="document.body.style.cursor='auto'" />

But the problem is i dont see the difference at all, i think the ajax status time is very quick than the reaction time to identify it

Thank you for the reply.