Subscribe

  • Subscribe  

Enhanced search string ComboBox

Posted by Harry Vikatos | July 3, 2008 .

The standard behaviour of the Flex framework combobox, is to adjust its selected option as the user types in characters. However values are looked up only by the first character, i.e. user types in ‘a’ and the first option starting with ‘a’ is selected. He then types ‘b’ and the first option starting with ‘b’ is selected.

Now this may be good enough for short lists of options, but is probably insufficient for longer lists and for intensive data entry, where forcing the user to switch from the keyboard to the mouse makes the process inefficient.

Ideally one would like the combo box jumping its selection to the string matching all the typed in characters by the user.

See for example the flex app below, where the combobox behaves like that. Use the tab to turn the focus on the combo and start typing letters of the word ‘restaurant’. The selected option will reflect exactly the typed in string of characters.

Below you can also see the source code for this custom combobox control. One thing to notice is the timeout mechanism for resetting the typed in string. So if there is a time gap of 3secs or above between typed in characters, the combo will consider it a fresh search string. This behaviour stands ontop of the default search behaviour of the combobox (by the first characters), i.e. there is no overriding of the default keydown events handler. Some improvements may be also a good idea, like handling non characters keystrokes (like enter, backspace or tab), … but the basis of it is there.

1: <?xml version="1.0" encoding="utf-8"?>
2: <mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml" keyDown="keyDown(event);">
3: <mx:Script>
4:          <![CDATA[
5: import mx.collections.ArrayCollection;
6: import flash.utils.*;
7: [Bindable]
8: private var str:String = "";
9: private var timer:uint;
10: private var currentIndex:int = 0;
11:
12: private function keyDown(event:KeyboardEvent):void {
13: str += String.fromCharCode(event.charCode);
14: setSelection();
15: clearTimeout(timer);
16: timer = setTimeout(clearString, 3000);
17:              }
18:
19: private function setSelection():void {
20: if(str=="") {
21: selectedIndex = 0;
22: currentIndex = 0;
23:                  }
24: selectedIndex = currentIndex;
25: var source:ArrayCollection = dataProvider as ArrayCollection;
26:                  for (var i:int=0; i<source.length; i++) {
27:                      var s:String = source[i] as String;
28: if(s==null) s = source[i][labelField] as String;
29: if(s.toLowerCase().indexOf(str.toLowerCase())==0) {
30: selectedIndex = i;
31:                          break;
32:                      }
33:                  }
34: currentIndex = selectedIndex;
35:              }
36:
37: private function clearString():void {
38: str = "";
39:              }
40:
41:          ]]>
42: </mx:Script>
43: </mx:ComboBox>

Leave a Comment

If you would like to make a comment, please fill out the form below.


Name

Email

Website

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word

Comments

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word


Related Posts

5 Comments so far
  1. Dave Spurr  July 3, 2008 7:38 am

    I also noticed this issue when I started using Flex so released a component that extends the ComboBox in a similar manner to yours, if you wish to compare them it can be found at http://www.defusion.org.uk/code/foxycombobox-for-flex/

  2. Riccardo Bartoli  July 6, 2008 5:56 pm

    The example doesn’t work in FF3+ FP 9.0.124

  3. nhatha  October 27, 2008 7:24 pm

    i love this forum

  4. nhatha  October 27, 2008 7:25 pm

    i like this forum

  5. Victor Tachella  June 5, 2009 7:59 am

    Very nice post. Very usefull but I made a few changes in the code as I wanted this to work with more than just one combo. And removed the label field… it wasn’t working for me and I didn’t need it. Probably something to do with using lastest Flex version.
    I only made changes in the first two functions:

    // 3 FUNCTIONS TO ALLOW MULTIPLE TYPED CHAR SEARCH IN COMBOBOX

    /** Capture of the keydown evets and build the string to search
    */
    private function keyDown(event:KeyboardEvent):void {
    str += String.fromCharCode(event.charCode);

    setSelection(event.target as ComboBox);

    clearTimeout(timer);
    timer = setTimeout(clearString, 2000);
    }

    /**Search for the string inside the comboBox
    */
    private function setSelection(combo:ComboBox):void {
    if(str==””) {
    combo.selectedIndex = 0;
    }
    var source:ArrayCollection = combo.dataProvider as ArrayCollection;
    for (var i:int=0; i<source.length; i++) {
    var s:String = source[i] as String;
    if(s.toLowerCase().indexOf(str.toLowerCase())==0) {
    combo.selectedIndex = i;
    break;
    }
    }
    }

    /** Cleanthe string being searched. So we can search a new one.
    */
    private function clearString():void {
    str = “”;
    }

<

Error. Page cannot be displayed. Please contact your service provider for more details. (12)


Direct TV Offers - usdirect has the best directtv deals