dhtmlxcombo - LimitToList property ?

Suite and Optimus Suite 5
#1

Hi,



excellent tools, thanks.



Is there an easy way to limit entered text to list of choices in combobox ?

like LimitToList property of combobox in Access.



Thanks again,



Flo

#2

In case of dynamic filtering - combo shows as many rows as was returned by server side code.
In case of static filtering - there is no API call - by behavior can be adjusted by next code modification
    dhtmlxcombo.js line 938

      for(var i=0; i<this.optionsArr.length; i++){
           var z=filter.test(this.optionsArr[i].text);

may be change to
      var limit=0;
      for(var i=0; i<this.optionsArr.length; i++){
          var z=filter.test(this.optionsArr[i].text)&&(limit<10);
          if (z) limit++;

#3

Sorry, my explanation wasn’t clear.

Actually, I’d like to prevent user from entering a new value. In other words, I don’t want COMBONAME_new_value = true.
For example, if the list contains “a”, “b” and “c”, when text is entering, any value which doesn’t match “a”, “b”, “c” isn’t allowed.

Regards,

Flo

#4

You can attach onChange event from combo and check from it - is entered data has related option, or its a new text ( combo.getActualValue()==combo.getComboText() )

#5

Thanks.

I wrote limitToList function, it works with Firefox, but the code is ugly.
Nevertheless, this can help somebody.

dhtmlXCombo.prototype.limitToList = function(mode){
    var z = convertStringToBoolean(mode);
    if(this._limitToList == z || (!z && this._limitToList === undefined))
        return;
    this._limitToList = z;
    var submitForm = function(combo) {
        return function(event) {
            if(combo.getSelectedValue() === null) {
                alert(“Combo doesn’t contain the typed text.”);
                event.preventDefault();
            }
        };
    }
    var comboChange = function() {
        if(this.getSelectedValue() === null) {
            if(this._idEvtLimitB !== undefined) // => OnChange event multi-fires
                this.detachEvent(this._idEvtLimitB);
            else {
              alert(“Combo doesn’t contain the typed text.”);
            }
            this._idEvtLimitB = this.attachEvent(“onBlur”, function() {
                                    this.DOMelem_input.focus();
                                });
        }
        else if(this._idEvtLimitB !== undefined) {
            this.detachEvent(this._idEvtLimitB);
            this._idEvtLimitB = undefined;
        }
    }
    if(this._limitToList) {
       this._idEvtLimitC = this.attachEvent(“onChange”, comboChange);
       this.DOMelem_input.form.addEventListener(“submit”, submitForm(this), false);
    }
    else {
       this.detachEvent(this._idEvtLimitC);
       this.DOMelem_input.form.removeEventListener(“submit”, submitForm(this), false);
    }
}

#6

I’ve modified your solution slightly so it searches inside strings as well, and just doesn’t let you type anything what is not included in available options…

dhtmlXCombo.prototype.limitToList = function(mode){
    var z = convertStringToBoolean(mode);
    
    if(this._limitToList == z || (!z && this._limitToList === undefined))
        return;
    this._limitToList = z;
    var submitForm = function(combo) {
        return function(event) {
            if(combo.getSelectedValue() === null) {
                event.preventDefault();
            }
        };
    }
    
    var comboChange = function() {
      var text=this.getComboText();
      if (this._xml){
         this._lkmode=mode;
         this._fetchOptions(0,text);
      }
      
      try{ var filter=new RegExp(text,“i”); } catch (e){ var filter=new RegExp("^"+text.replace(/([[]{}()+*\])/g,"\$1")); }
      
      this.filterAny=false;
      var res_count  = 0
      for(var i=0; i<this.optionsArr.length; i++){
           var z=filter.test(this.optionsArr[i].text);
           this.filterAny|=z;
         this.optionsArr[i].hide(!z);
         if (z) res_count++;
      }
      if (res_count==0)
      {
      this.setComboText(this.getComboText().slice(0, -1));
         }
   }

    
    if(this._limitToList) {
       this._idEvtLimitC = this.attachEvent(“onKeyPressed”, comboChange);
       this.DOMelem_input.form.addEventListener(“submit”, submitForm(this), false);
    }
    else {
       this.detachEvent(this._idEvtLimitC);
       this.DOMelem_input.form.removeEventListener(“submit”, submitForm(this), false);
    }
}