创建一个具有文字提示的TextInput

发布于，归属于flex实例。 只剩下板凳啦！ 共有459人围观    

先来看下演示，体验下其效果。

实际上这并不算完整的自动完成的功能，但提供flex实现输入框自动完成功能的核心。我们来看下其源代码。

完整源代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3.     <mx:Script>
  4.         <![CDATA[
  5.             [Bindable]
  6.             private var allWords:Array = ["apple", "boy", "cat","milk", "orange", "pepper", "recipe", "truck"];
  7.             private var regexp:RegExp;
  8.             private function checkInput():void{
  9.                 var tmp:Array = allWords.filter(filter);
  10.                 input.text = tmp[0];
  11.             }
  12.             private function filter(element:*,index:int,arr:Array):Boolean{
  13.                 regexp = new RegExp(input.text);
  14.                 return (regexp.test(element as String));
  15.             }
  16.         ]]>
  17.     </mx:Script>   
  18. <mx:Canvas  width="400" height="300">
  19.     <mx:TextInput id="input" change="checkInput()"  x="120" y="100"/>
  20. </mx:Canvas>
  21. </mx:Application>

关键要点说明:

  1. 使用TextInput 组建的change 事件监听用户输入
  2. 使用数组的filter过滤函数
  3. 使用正则表达式测试词典里是否有何用户输入的内容相匹配的单词

来看其关键代码：

checkInput()

  1. private function checkInput():void{
  2.                 var tmp:Array = allWords.filter(filter);
  3.                 input.text = tmp[0];
  4.             }

这里最关键的是建立个临时数组tmp来获取经过过滤后的数组，将值写入输入框。filter（）中的filter未过滤回调函数。

filter

  1. private function filter(element:*,index:int,arr:Array):Boolean{
  2.                 regexp = new RegExp(input.text);
  3.                 return (regexp.test(element as String));
  4.             }

使用正则来匹配单词数组与输入框的值。

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

只剩下板凳了！

  1. kelvin

    都是很技术的活啊 呵呵 看不懂 ~！

同类