1 Reply Latest reply on Oct 31, 2013 7:32 PM by Brian Leathem

    Autocomplete: ignored API call .setValue('')

    alexey plotnikov Newbie

      I have this autocomplete component:

      <table> 
         <tr> 
            <td> 
               <rich:autocomplete mode="ajax" autocompleteMethod="#{autocomplete.autocompleteProviders}" 
                                  minChars="0" var="s" fetchValue="#{s.realName}" id="provider-suggestion" 
                                  autofill="false" 
                                  onselectitem="autocompleteChangeProvider(event.target)" style="display: inline;" 
                                  layout="table" value="#{autocomplete.providerName}" > 
                  <a4j:queue requestDelay="500" ignoreDupResponses="true" /> 
                  <h:column> 
                     <h:outputText style="display:none;" value="#{s.id}"/> 
                     <h:outputText style="display:none;" value="#{s.realName}"/> 
                  </h:column> 
                  <h:column> 
                     <h:outputText value="#{s.name}" escape="false"/> 
                  </h:column> 
               </rich:autocomplete> 
            </td> 
            <td> 
               <h:graphicImage value="/img/arrow.png" onclick="#{rich:component('provider-suggestion')}.setValue('');#{rich:component('provider-suggestion')}.showPopup();stopEvent(event);" 
                               alt=""/> 
               <h:graphicImage value="/img/cancel.png" 
                               onclick="#{rich:component('provider-suggestion')}.hidePopup();#{rich:component('provider-suggestion')}.setValue('');autocompleteChangeProvider(null);" 
                               alt="#{messages['pages.clear']}" title="#{messages['pages.clear']}"/> 
               <h:inputHidden id="filter-provider-id" value="#{autocomplete.providerId}"/> 
            </td> 
         </tr> 
      </table>
      
      

      as you can see, i don't use showButton="true", because i need another functionality, i need erase input text before show popup window.

      I use JavaScript function "autocompleteChangeProvider" for extract selected id.

      I use separate button(/img/cancel.png) for erase input text, as you can see this function just use Richfaces API.

       

      And a problem:

      if autocomplete.providerName not null and not empty(in rich:autocomplete) and user clicks on show button(/img/arrow.png) than input text not erasing, but i called #{rich:component('provider-suggestion')}.setValue('') !!!

       

      I think i found a solution

      AutocompleteBase.js has this code:

      rf.ui.AutocompleteBase = function(componentId, selectId, fieldId, options) {
              // call constructor of parent class
              $super.constructor.call(this, componentId);
              this.selectId = selectId;
              this.fieldId = fieldId;
              this.options = $.extend({}, defaultOptions, options);
              this.namespace = this.namespace || "." + rf.Event.createNamespace(this.name, this.selectId);
              this.currentValue = "";
              this.tempValue = this.getValue();
              this.isChanged = this.tempValue.length != 0;
              bindEventHandlers.call(this);
          };
      

      as you can see this.currentValue = "" so JS thinks that this.currentValue="" so currentValue equal new value("" - empty string), so nothing happens.

      i replace this code by this:

      rf.ui.AutocompleteBase = function(componentId, selectId, fieldId, options) {
              // call constructor of parent class
              $super.constructor.call(this, componentId);
              this.selectId = selectId;
              this.fieldId = fieldId;
              this.options = $.extend({}, defaultOptions, options);
              this.namespace = this.namespace || "." + rf.Event.createNamespace(this.name, this.selectId);
              this.currentValue = $(rf.getDomElement(fieldId)).val();
              this.tempValue = this.getValue();
              this.isChanged = this.tempValue.length != 0;
              bindEventHandlers.call(this);
          };
      

       

      and it works!

      Is this right resolve?