Start Building Professional
Web Apps Today

dhtmlxcombo - LimitToList property ?

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

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++;

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

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() )

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);
    }
}

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);
    }
}