做一個(gè)小程序要用到Flex文本框自動(dòng)提示的功能，因?yàn)闀r(shí)間不是很緊，所以決定自己動(dòng)手做這個(gè)小組件，花了一個(gè)晚上的時(shí)間終于完成了。貼出來與大家分享一下。
　　雖然網(wǎng)上有不少這樣的組件，但自己動(dòng)手做可以鍛煉下思維及動(dòng)手能力，且老吃現(xiàn)成飯，總感覺不是很爽……廢話少說，進(jìn)入正題。

組件運(yùn)行時(shí)截圖

?

設(shè)計(jì)思路
?　　思路比較簡單，組件分成兩個(gè)部分，1文本框；2提示的下拉列表；
自動(dòng)提示：
　　在文本框中輸入文字時(shí)，在數(shù)據(jù)源（所有的提示項(xiàng)）查找匹配的選項(xiàng)，若匹配的選項(xiàng)數(shù)量>0，在文本框下方顯示下拉列表供用戶選擇；

自動(dòng)補(bǔ)全：
　　在匹配的選項(xiàng)中選擇最合適的一項(xiàng)（通常為第一項(xiàng)），與用戶輸入做對比，將用戶未完成輸入的字符補(bǔ)全到文本框中去，并將補(bǔ)全部分字符設(shè)置為選中狀態(tài)；（為什么要處于選中狀態(tài)，假如補(bǔ)全文字不是用戶所需要的，用戶只要再往下輸文字就可以了，而不用手動(dòng)刪除補(bǔ)上去的文字）

代碼實(shí)現(xiàn)（關(guān)鍵點(diǎn)）
1．?界面的制作，文本框+下拉列表，是不是讓人馬上聯(lián)想到了下拉列表框；為了簡單起見，我便把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}

因?yàn)镃omboBox的長度要比TextInput?寬，也要進(jìn)行處理一下：

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

?

2．?當(dāng)文本發(fā)生變化時(shí)，觸發(fā)查找匹配項(xiàng)的方法，重寫父類的textInput_changeHandler(event:Event)事件。

Code
?1/**?*//**
?2*?文本發(fā)生變化時(shí)
?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();//調(diào)用該方法，隨后會(huì)觸發(fā)調(diào)用commitProperties()
14}

3．進(jìn)行匹配項(xiàng)的查找，假如控件指定了要進(jìn)行自動(dòng)補(bǔ)全則進(jìn)行自動(dòng)補(bǔ)全操作。

Code
?1override?protected?function?commitProperties():void{
?2????????????if(isTextBoxStringChange){
?3????????????????prompt=text;
?4????????????????filter();????????????????????????????//進(jìn)行匹配項(xiàng)的查找
?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。檢查匹配項(xiàng)的數(shù)量若不為0，則顯示下拉列表，供用戶參考選擇。

Code
?1/**?*//**
?2*?數(shù)據(jù)源發(fā)生變化,數(shù)據(jù)不為0彈出下拉列表
?3*/?
?4override?protected?function?collectionChangeHandler(event:Event):void
?5{
?6????????????super.collectionChangeHandler(event);
?7????????????if(dataProvider.length>0)
?8????????????{
?9????????????????open();
10????????????}
11}

?

難點(diǎn)、易出問題點(diǎn)

1，輸入文本框的文字顯示不出來，因?yàn)橄到y(tǒng)默認(rèn)將光標(biāo)一直放在第一個(gè)位置，造成用戶輸入的文字被取消掉，所以在即使不需要補(bǔ)全是，也要進(jìn)行textInput.setSelection的操作，如下:

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

2，退格鍵不起作用，專門為退格鍵按下作一個(gè)FLAG，進(jìn)行特殊的處理

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????????????????//當(dāng)按UP鍵向上選擇時(shí)，到達(dá)最頂時(shí)，顯示用戶原來所需文字
18????????????????if(event.keyCode?==?Keyboard.UP?&&?selectedIndex==0)
19????????????????{
20????????????????????selectedIndex=-1;
21????????????????}????????????????????????????????
22????????????}
23????????????super.keyDownHandler(event);
24}

?源代碼下載

/Files/badwps/MyAutoComplete.rar

轉(zhuǎn)載于:https://www.cnblogs.com/badwps/archive/2009/11/13/1602182.html

總結(jié)

以上是生活随笔為你收集整理的[原创]Flex文本框自动提示(AutoSuggest)、自动完成(AutoComplete)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。