Flex文本框自动提示(AutoSuggest)、自动完成(AutoComplete)

　　做一个小程序要用到Flex文本框自动提示的功能，因为时间不是很紧，所以决定自己动手做这个小组件，花了一个晚上的时间终于完成了。贴出来与大家分享一下。
　　虽然网上有不少这样的组件，但自己动手做可以锻炼下思维及动手能力，且老吃现成饭，总感觉不是很爽……废话少说，进入正题。

组件运行时截图

 

设计思路
 　　思路比较简单，组件分成两个部分，1文本框；2提示的下拉列表；
自动提示：
　　在文本框中输入文字时，在数据源（所有的提示项）查找匹配的选项，若匹配的选项数量>0，在文本框下方显示下拉列表供用户选择；

自动补全：
　　在匹配的选项中选择最合适的一项（通常为第一项），与用户输入做对比，将用户未完成输入的字符补全到文本框中去，并将补全部分字符设置为选中状态；（为什么要处于选中状态，假如补全文字不是用户所需要的，用户只要再往下输文字就可以了，而不用手动删除补上去的文字）

代码实现（关键点）
1． 界面的制作，文本框+下拉列表，是不是让人马上联想到了下拉列表框；为了简单起见，我便把Flex中的Combox“伪装”成TextInput，代码如下：

Code
 1private function init(){
 2            editable=true;
 3            rowCount=5;
 4            selectedIndex=-1;
 5            isTextBoxStringChange=false;
 6            isfocusInDropDown=false;
 7            isAutoComplete=false;
 8            //伪装成TextBox
 9            setStyle("cornerRadius",0);
10            setStyle("arrowButtonWidth",0);
11            setStyle("fontWeight","normal");
12            setStyle("paddingLeft",0);                    
13}

因为ComboBox的长度要比TextInput 宽，也要进行处理一下：

1 /** */ /**
2* 与TextBox同样的宽度
3*/  
4 override  protected  function measure(): void
5 {
6            super.measure();
7            measuredWidth=UIComponent.DEFAULT_MEASURED_WIDTH;    
8}

 

2． 当文本发生变化时，触发查找匹配项的方法，重写父类的textInput_changeHandler(event:Event)事件。

Code
 1/** *//**
 2* 文本发生变化时
 3*/ 
 4override protected function textInput_changeHandler(event:Event):void
 5{
 6            if(textInput.text == ""){
 7                isTextBoxStringChange=false;
 8            }
 9            else{            
10                isTextBoxStringChange=true;
11            }
12            super.textInput_changeHandler(event);
13            invalidateProperties();//调用该方法，随后会触发调用commitProperties()
14}

3．进行匹配项的查找，假如控件指定了要进行自动补全则进行自动补全操作。

Code
 1override protected function commitProperties():void{
 2            if(isTextBoxStringChange){
 3                prompt=text;
 4                filter();                            //进行匹配项的查找
 5                if(isAutoComplete&&!isBackSpaceKeyDown){
 6                    var autoCompleteString:String="";
 7                    if(dataProvider.length>0)
 8                    {
 9                        autoCompleteString=itemToLabel(dataProvider[0]);
10                        textInput.setSelection(prompt.length,autoCompleteString.length);
11                        prompt=autoCompleteString;                                                    
12                    }    
13                    else{
14                        textInput.setSelection(textInput.selectionEndIndex,textInput.selectionEndIndex);
15                    }
16                }
17                else{
18                    textInput.setSelection(textInput.selectionEndIndex,textInput.selectionEndIndex);    
19                }
20            }                
21            super.commitProperties();
22}

 4。检查匹配项的数量若不为0，则显示下拉列表，供用户参考选择。

Code
 1/** *//**
 2* 数据源发生变化,数据不为0弹出下拉列表
 3*/ 
 4override protected function collectionChangeHandler(event:Event):void
 5{
 6            super.collectionChangeHandler(event);
 7            if(dataProvider.length>0)
 8            {
 9                open();
10            }
11}

 

难点、易出问题点

1，输入文本框的文字显示不出来，因为系统默认将光标一直放在第一个位置，造成用户输入的文字被取消掉，所以在即使不需要补全是，也要进行textInput.setSelection的操作，如下:

textInput.setSelection(textInput.selectionEndIndex,textInput.selectionEndIndex); // 这一句不是多余的

2，退格键不起作用，专门为退格键按下作一个FLAG，进行特殊的处理

Code
 1/** *//**
 2* 处理退格键按下的情况
 3*/     
 4override protected function keyDownHandler(event:KeyboardEvent):void
 5{
 6            if(!event.ctrlKey&&!event.shiftKey)
 7            {
 8                if(event.keyCode == Keyboard.BACKSPACE)
 9                {
10                    close();
11                    isBackSpaceKeyDown=true;
12                }
13                else
14                {
15                    isBackSpaceKeyDown=false;
16                }
17                //当按UP键向上选择时，到达最顶时，显示用户原来所需文字
18                if(event.keyCode == Keyboard.UP && selectedIndex==0)
19                {
20                    selectedIndex=-1;
21                }                                
22            }
23            super.keyDownHandler(event);
24}

 源代码下载

/Files/badwps/MyAutoComplete.rar