4.3.創(chuàng)建一個(gè)具有文字提示的文本輸入框

2024-04-27 13:51:53

字體：大中小

供稿：網(wǎng)友

4.3.1. 問(wèn)題
我想創(chuàng)建一個(gè)具有預(yù)測(cè)能力的TextInput，他會(huì)從詞典中找出一些推薦的單詞供用戶(hù)選擇。
4.3.2. 解決辦法
使用TextInput 組建的change 事件監(jiān)聽(tīng)用戶(hù)輸入，同時(shí)使用正則表達(dá)式測(cè)試詞典里是否有何用戶(hù)輸入的內(nèi)容相匹配的單詞。
4.3.3. 討論
TextInput 組建定義了change 事件，TextInput 組件的值的每次變更都會(huì)由它來(lái)分發(fā)。你可以用這個(gè)事件去檢測(cè)用戶(hù)輸入和測(cè)試短詞典中所有單詞的匹配行為。例如:

-XML

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
<mx:Script>
<![CDATA[
[Bindable]
private var probableMatches:Array;
private var allWords:Array = ["apple", "boy", "cat",
"milk", "orange", "pepper", "recipe", "truck"];
private var regexp:RegExp;
private function checkInput():void
{
var i:int = 0;
var temp:Array = allWords.filter(filter);
input.text = temp[0];
}
private function filter(element:*, index:int,
arr:Array):Boolean
{
regexp = new RegExp(input.text);
return (regexp.test(element as String));
}

]]>
</mx:Script>
<mx:TextInput id="input" change="checkInput()"/>
</mx:Canvas>