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

做一个小程序要用到Flex文本框自动提示的功能，因为时间不是很紧，所以决定自己动手做这个小组件，花了一个晚上的时间终于完成了。贴出来与大家分享一下。

　　虽然网上有不少这样的组件，但自己动手做可以锻炼下思维及动手能力，且老吃现成饭，总感觉不是很爽……废话少说，进入正题。

　　组件运行时截图

　　设计思路

　　思路比较简单，组件分成两个部分，1文本框；2提示的下拉列表；

　　自动提示：

　　在文本框中输入文字时，在数据源（所有的提示项）查找匹配的选项，若匹配的选项数量>0，在文本框下方显示下拉列表供用户选择；

　　自动补全：

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

　　代码实现（关键点）

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

　1private　function　init(){
　   editable=true;
　   rowCount=5;
     selectedIndex=-1;

     isTextBoxStringChange=false;
     isfocusInDropDown=false;
     isAutoComplete=false;
     //伪装成TextBox
     setStyle("cornerRadius",0);
     setStyle("arrowButtonWidth",0);
     setStyle("fontWeight","normal");
     setStyle("paddingLeft",0);　　　　　　　　　　　　　　　　　　　　
   }

 

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

 

 

/**　*//**
*　与TextBox同样的宽度
*/　
override　protected　function　measure():void
{
　　　　　　　　　　super.measure();
　　　　　　　　　　measuredWidth=UIComponent.DEFAULT_MEASURED_WIDTH;　　　　
}

　　

 

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

　/**　*//**
　*　文本发生变化时
　*/　
　override　protected　function　textInput_changeHandler(event:Event):void
　{
　　　　　　　　　　　　　if(textInput.text　==　""){
　　　　　　　　　　　　　　　　　isTextBoxStringChange=false;
　　　　　　　　　　　　　}
　　　　　　　　　　　　　else{　　　　　　　　　　　　
　　　　　　　　　　　　　　　　isTextBoxStringChange=true;
　　　　　　　　　　　　}
　　　　　　　　　　　　super.textInput_changeHandler(event);
　　　　　　　　　　　　invalidateProperties();//调用该方法，随后会触发调用commitProperties()
}

 

 

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

　override　protected　function　commitProperties():void{
　　　　　　　　　　　　　if(isTextBoxStringChange){
　　　　　　　　　　　　　　　　　prompt=text;
　　　　　　　　　　　　　　　　　filter();　　　　　　　　　　　　　　　　　　　　　　　　　　　　//进行匹配项的查找
　　　　　　　　　　　　　　　　　if(isAutoComplete&&!isBackSpaceKeyDown){
　　　　　　　　　　　　　　　　　　　　　var　autoCompleteString:String="";
　　　　　　　　　　　　　　　　　　　　　if(dataProvider.length>0)
　　　　　　　　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　　　　　　　autoCompleteString=itemToLabel(dataProvider[0]);
　　　　　　　　　　　　　　　　　　　　　　textInput.setSelection(prompt.length,autoCompleteString.length);
　　　　　　　　　　　　　　　　　　　　　　　　prompt=autoCompleteString;　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　}　　　　
　　　　　　　　　　　　　　　　　　　　else{
　　　　　　　　　　　　　　　　　　　　　　　　textInput.setSelection(textInput.selectionEndIndex,textInput.selectionEndIndex);
　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　else{
　　　　　　　　　　　　　　　　　　　　textInput.setSelection(textInput.selectionEndIndex,textInput.selectionEndIndex);　　　　
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　}　　　　　　　　　　　　　　　　
　　　　　　　　　　　　super.commitProperties();
}

 

 

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

　/**　*//**
　*　数据源发生变化,数据不为0弹出下拉列表
　*/　
　override　protected　function　collectionChangeHandler(event:Event):void
　{
　　　　　　　　　　　　　super.collectionChangeHandler(event);
　　　　　　　　　　　　　if(dataProvider.length>0)
　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　　open();
　　　　　　　　　　　　}
}

　　难点、易出问题点

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

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

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

　/**　*//**
　*　处理退格键按下的情况
　*/　　　　　
　override　protected　function　keyDownHandler(event:KeyboardEvent):void
　{
　　　　　　　　　　　　　if(!event.ctrlKey&&!event.shiftKey)
　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　　if(event.keyCode　==　Keyboard.BACKSPACE)
　　　　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　　　　　close();
　　　　　　　　　　　　　　　　　　　　isBackSpaceKeyDown=true;
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　else
　　　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　　　　　isBackSpaceKeyDown=false;
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　//当按UP键向上选择时，到达最顶时，显示用户原来所需文字
　　　　　　　　　　　　　　　　if(event.keyCode　==　Keyboard.UP　&&　selectedIndex==0)
　　　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　　　　　selectedIndex=-1;
　　　　　　　　　　　　　　　　}　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　}
　　　　　　　　　　　　super.keyDownHandler(event);
}

 

 

评论

1 楼 guoguo3303 2012-05-22  

如何在下拉列表选择一项后，使光标自动去掉？可以再次选择

当输入框中的数据为空时，下拉列表显示初始化时的数据 ？