Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Christian on Jan 05, 2010 07:46
open dhtmlx forum
ComboBox dynamic focus in option list while typing

Hi,

Is there a way to implement the following behavior with the DHTMLXCombobox:

When typing a text into the textbox, the select list is visible underneath it (usually). Typing a text that exactly matches one of the options in the list will select/focus the option. I would like to have the first option focused that would match the partial string of the text that I’m typing. Like this the focus automatically would move to the first best-match element in the list dynamically.

Example: I use the ComboBox as a time-picker. Option list looks like:

00:00
00:15
00:30
…
23:00
23:15
23:30
23:45

When typing 10 I would like 10:00 to be focused in the list, without filtering all other elements.

Regards,
Christian
Answer posted by Alex (support) on Jan 06, 2010 00:23

Hello,

there is filtering functionality - that allows to filter options by the text in combo inout. Please check the sample: http://www.dhtmlx.com/docs/products/dhtmlxCombo/samples/04_filtering/02_combo_filter.html

Answer posted by Christian, on Jan 06, 2010 01:13

Hi,

I know the filtering option.

Filtering removes all option entries not matching the entered text. I would like to keep the whole list and just focus the best first match dynamically, without loosing all other entries.

regards,

Christian

Answer posted by Alex (support) on Jan 06, 2010 01:34

Hello

you can use the following approach that is based on private properties:

combo.attachEvent("onKeyPressed",function(key){
    var input_text = this.DOMelem_input.value.toLowerCase();
    for(var i=0; i<this.optionsArr.length; i++){
        var text = this.optionsArr[i].text;
        if(text.toString().toLowerCase().indexOf(input_text) == 0){
            this.selectOption(i);
            break;
        }
    }
})

Here combo is combo object.

Answer posted by Christian on Jan 06, 2010 02:02

Hi Alex,

I tried your approach, but my combobox text input becomes uneditable. Could you have a look at the attached code example:

 

<form action="/area51/!flex_test" method="GET" name="ctest">
      <select style='width:200px;'  id="combo_zone1" name="alfa1">
          <option value="00:00">00:00</option>
          <option value="00:30">00:30</option>
…

          <option value="23:00">23:00</option>
          <option value="23:30">23:30</option>
      </select>
      <input type="submit"/>
</form>

<script>
   var z = dhtmlXComboFromSelect("combo_zone1");
  
    z.attachEvent("onKeyPressed",function(key){
        var input_text = this.DOMelem_input.value.toLowerCase();
        for(var i=0; i<this.optionsArr.length; i++){
            var text = this.optionsArr[i].text;
            if(text.toString().toLowerCase().indexOf(input_text) == 0){
                this.selectOption(i);
                break;
            }
        }
    })
  
  
</script>

</body>
</html>

regards,

Christian

Attachments (1)
combotest_temp.html3.45 Kb
Answer posted by Alex (support) on Jan 06, 2010 02:21

Sorry for the misleading information.

Unfortunately there isn't a public method to highlight and focus an option without its selection. So, the approach provided before can not be used.

Answer posted by Christian on Jan 06, 2010 02:35

Thanks Alex,

Maybe this would be a nice enhancement for a future build.

regards,

Christian

Answer posted by Alex (support) on Jan 06, 2010 04:53

Christian,

thank you for the idea. Possibly we'll implement this functionality in one of future builds.