2 Replies Latest reply on Nov 25, 2010 5:45 AM by Vamshi Krishna

    How to detach a selected entity after selecting it from rich:suggestionbox?

    Vamshi Krishna Newbie

      Hi,

       

      I am currently using rich:suggestionbox to populate entries and onselect I am binding that object. But as I said I am using suggestionbox, so once I select an entry it is displayed in a text box. I have a scenario where in, if I delete the text from the textbox I want to detach the object which is selected from the rich:suggestionbox.

       

      Following is my code block.

       

      <h:inputText style="margin:0px;" id="#{id}_input"  value="" />

       

      <rich:suggestionbox height="#{empty height ? '200' : height}"
                                          width="#{empty width ? '300' : width}" id="#{id}"
                                          suggestionAction="#{suggestionService[action]}" var="item"
                                          for="#{id}_input"
                                          minChars="#{empty minChars ? '1' : minChars}"
                                          zindex="#{finalZIndex}"
                                          rendered="#{editable}">
                                         status="#{id}status">
                                      <h:outputText value="#{item[displayProperty]}"/>

       

           <a4j:support event="onselect" ajaxSingle="true" reRender="#{reRender}">
                <f:setPropertyActionListener value="#{item}" target="#{bindTo}"/>
           </a4j:support>
      </rich:suggestionbox>

        • 1. Re: How to detach a selected entity after selecting it from rich:suggestionbox?
          Ilya Shaikovsky Master

          using onchange on input for storing the value should be used in common cases. But with suggestion box there is problem that change will be fired when suggestions called as input looses focus. So you should carefull read about workaround there

          • 2. Re: How to detach a selected entity after selecting it from rich:suggestionbox?
            Vamshi Krishna Newbie

            I went through the workaround but I was unable to solve my problem. I have used the code blocks which you have mentioned in your workaround for testing purpose. Following is the code block after my changes.

             

             

            <a4j:queue requestDelay="300"/>

            <script type="text/javascript">

            var suggestionRequestFired=false;

            function myFunc(){

            if (suggestionRequestFired) {

                                 callAjax();

            }

            suggestionRequestFired = true;

            }

            </script>

             

            <a4j:outputPanel id="XXXXX">

            <h:inputText style="margin:0px;" id="#{id}_input"  value=""

            onblur="setTimeout('myFunc()',300);"/>

             

            <rich:suggestionbox height="#{empty height ? '200' : height}"

            width="#{empty width ? '300' : width}" id="#{id}"

            suggestionAction="#{suggestionService[action]}" var="item"

            onselect="if (event.type!='keydown') suggestionRequestFired=false;"

            for="#{id}_input"

            minChars="#{empty minChars ? '1' : minChars}"

            zindex="#{finalZIndex}"

            rendered="#{editable}">

             

            <h:outputText value="#{item[displayProperty]}"/>

             

            <!--Removed this onselect event-->

            <!--<a4j:support event="onselect" ajaxSingle="true" reRender="#{reRender}">

            <f:setPropertyActionListener value="#{item}" target="#{bindTo}"/>

            </a4j:support>-->

             

            </rich:suggestionbox>

            </a4j:outputPanel>

            <a4j:jsFunction name="callAjax" ajaxSingle="true" process="#{fieldId}" reRender="XXXXX"></a4j:jsFunction>

             

             

            I have commented the <a4j:support event="onselect"...> and the entity is not getting binded at all? All I need is when I select something from the autosuggest the entity should be binded and when I clear the text from the textbox the entity corresponding to the text should be detached?
            I am not sure if I am missing something. Please help. 
            function myFunc(){
            if (suggestionRequestFired) {
            callAjax();
            }
            suggestionRequestFired = true;
            }
                </script>