Autosuggest the Textbox in Flex

After a very long time I got time to code something. I thought what to write, various technology which one to go with PHP, Coldfusion, flex, javascript. After thinking for a min, I started with Flex. What to create? Autosuggest TextBox!.

So I created a autosuggest textbox, I quickly thought what all I need

Textbox, Allow user input.
Listbox, To hold the list the matched list from the textbox.
Tweening, Which will give a feel of panel movement comig out of the textbox with matched value.

Algorithm
=========
1.Track keyUp event on the textbox which in turn filter the main array which is holding the entire values.
2.Apply regExp which will hold the format to look for.
eg. typing A, should give me all the values starting from the ‘A’ character.
3.test the regular expression against the main array by looping over each value.
4.If test successful then hold these value into the new array which in turn binded with the list box.
5.Animate the list box with resize event if filteredArray has more values into it from the step 4.

Notes
=====
We can supply the list to main array from database, or keep it hardcoded.

You are ready with your autosuggest box.

Click here to view the Working sample

Happy coding

Restricting the character entry into the TextInput

We were struggling from last several days about how to restrict some special character entry into TextInput field. We tried applying our own logic for implementing this functionality by tracking the keydown event and checking the ascill/regular expression but did not succeeded into this.

Finally I thought to look into the help and suprisingly we find that TextInput has restrict property to which we can supply the range of character that the TextInput should accept.

<mx:TextInput x=”104″ y=”151″ width=”190″ id=”charInput” restrict=”a-z A-Z”/>

Complex problem always has very simple solution