net/systemeD/controls/AutoComplete.as

   1 /*
   2         AutoComplete component
   3         based on Adobe original but heavily bug-fixed and stripped down
   4         http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1047291
   5
   6         Enhancements to do:
   7         - up/down when field empty should show everything
   8         - up (to 0) when dropdown displayed should cause it to reset to previous typed value
   9         - down (past only item) when dropdown displayed should paste it
  10         - shouldn't be able to leave empty fields, or those which already exist
  11 */
  12
  13 package net.systemeD.controls {
  14         import flash.events.KeyboardEvent;
  15         import flash.events.Event;
  16         import flash.events.FocusEvent;
  17         import flash.events.MouseEvent;
  18         import flash.net.SharedObject;
  19         import flash.ui.Keyboard;
  20         import mx.core.UIComponent;
  21         import mx.controls.ComboBox;
  22         import mx.controls.DataGrid;
  23         import mx.controls.listClasses.ListBase;
  24         import mx.collections.ArrayCollection;
  25         import mx.collections.ListCollectionView;
  26         import mx.events.DropdownEvent;
  27         import mx.events.ListEvent;
  28         import mx.events.FlexEvent;
  29         import mx.managers.IFocusManagerComponent;
  30
  31         [Event(name="filterFunctionChange", type="flash.events.Event")]
  32         [Event(name="typedTextChange", type="flash.events.Event")]
  33
  34         [Exclude(name="editable", kind="property")]
  35
  36         /**
  37          *      The AutoComplete control is an enhanced
  38          *      TextInput control which pops up a list of suggestions
  39          *      based on characters entered by the user. These suggestions
  40          *      are to be provided by setting the <code>dataProvider
  41          *      </code> property of the control.
  42          *      @mxml
  43          *
  44          *      <p>The <code>&lt;fc:AutoComplete&gt;</code> tag inherits all the tag attributes
  45          *      of its superclass, and adds the following tag attributes:</p>
  46          *
  47          *      <pre>
  48          *      &lt;fc:AutoComplete
  49          *        <b>Properties</b>
  50          *        keepLocalHistory="false"
  51          *        typedText=""
  52          *        filterFunction="<i>Internal filter function</i>"
  53          *
  54          *        <b>Events</b>
  55          *        filterFunctionChange="<i>No default</i>"
  56          *        typedTextChange="<i>No default</i>"
  57          *      /&gt;
  58          *      </pre>
  59          *
  60          *      @includeExample ../../../../../../docs/com/adobe/flex/extras/controls/example/AutoCompleteCountriesData/AutoCompleteCountriesData.mxml
  61          *
  62          *      @see mx.controls.ComboBox
  63          *
  64          */
  65         public class AutoComplete extends ComboBox
  66         {
  67
  68                 //--------------------------------------------------------------------------
  69                 //      Constructor
  70                 //--------------------------------------------------------------------------
  71
  72                 public function AutoComplete() {
  73                         super();
  74
  75                         //Make ComboBox look like a normal text field
  76                         editable = true;
  77
  78                         setStyle("arrowButtonWidth",0);
  79                         setStyle("fontWeight","normal");
  80                         setStyle("cornerRadius",0);
  81                         setStyle("paddingLeft",0);
  82                         setStyle("paddingRight",0);
  83                         rowCount = 7;
  84
  85                         if (maxChars) textInput.maxChars=maxChars;
  86                 }
  87
  88                 //--------------------------------------------------------------------------
  89                 //      Variables
  90                 //--------------------------------------------------------------------------
  91
  92                 private var cursorPosition:Number=0;
  93                 private var prevIndex:Number = -1;
  94                 private var showDropdown:Boolean=false;
  95                 private var showingDropdown:Boolean=false;
  96                 private var tempCollection:Object;
  97                 private var dropdownClosed:Boolean=true;
  98                 public var maxChars:uint=0;
  99
 100                 //--------------------------------------------------------------------------
 101                 //      Overridden Properties
 102                 //--------------------------------------------------------------------------
 103
 104                 override public function set editable(value:Boolean):void {
 105                         //This is done to prevent user from resetting the value to false
 106                         super.editable = true;
 107                 }
 108                 override public function set dataProvider(value:Object):void {
 109                         super.dataProvider = value;
 110                         tempCollection = value;
 111
 112                         // Big bug in Flex 3.5:
 113                         //  http://www.newtriks.com/?p=935
 114                         //  http://forums.adobe.com/message/2952677
 115                         //  https://bugs.adobe.com/jira/browse/SDK-25567
 116                         //  https://bugs.adobe.com/jira/browse/SDK-25705
 117                         //  http://stackoverflow.com/questions/3006291/adobe-flex-combobox-dataprovider
 118                         // We can remove this workaround if we ever move to Flex 3.6 or Flex 4
 119                         var newDropDown:ListBase = dropdown;
 120                         if(newDropDown) {
 121                                 validateSize(true);
 122                                 newDropDown.dataProvider = super.dataProvider;
 123
 124                                 dropdown.addEventListener(ListEvent.ITEM_CLICK, itemClickHandler, false, 0, true);
 125                         }
 126                 }
 127
 128                 override public function set labelField(value:String):void {
 129                         super.labelField = value;
 130                         invalidateProperties();
 131                         invalidateDisplayList();
 132                 }
 133
 134
 135                 //--------------------------------------------------------------------------
 136                 //      Properties
 137                 //--------------------------------------------------------------------------
 138
 139                 private var _typedText:String="";                       // text changed by user
 140                 private var typedTextChanged:Boolean;
 141
 142                 [Bindable("typedTextChange")]
 143                 [Inspectable(category="Data")]
 144                 public function get typedText():String { return _typedText; }
 145
 146                 public function set typedText(input:String):void {
 147                         _typedText = input;
 148                         typedTextChanged = true;
 149
 150                         invalidateProperties();
 151                         invalidateDisplayList();
 152                         dispatchEvent(new Event("typedTextChange"));
 153                 }
 154
 155                 //--------------------------------------------------------------------------
 156                 //      New event listener to restore item-click
 157                 //--------------------------------------------------------------------------
 158
 159                 protected function itemClickHandler(event:ListEvent):void {
 160                         typedTextChanged=false;
 161                         textInput.text=itemToLabel(collection[event.rowIndex]);
 162                         selectNextField();
 163                 }
 164
 165                 protected function selectNextField():void {
 166                         if (this.parent.parent is DataGrid) {
 167                                 this.parent.parent.dispatchEvent(new FocusEvent("keyFocusChange",true,true,null,false,9));
 168                         } else {
 169                                 focusManager.getNextFocusManagerComponent(true).setFocus();
 170                         }
 171                 }
 172
 173                 //--------------------------------------------------------------------------
 174                 //      Overridden methods
 175                 //--------------------------------------------------------------------------
 176
 177                 override protected function commitProperties():void {
 178                         super.commitProperties();
 179
 180                         if (dropdown) {
 181                                 if (typedTextChanged) {
 182                                         cursorPosition = textInput.selectionBeginIndex;
 183                                         updateDataProvider();
 184
 185                                         if( collection.length==0 || typedText=="" || typedText==null ) {
 186                                                 // no suggestions, so no dropdown
 187                                                 dropdownClosed=true;
 188                                                 showDropdown=false;
 189                                                 showingDropdown=false;
 190                                                 selectedIndex=-1;               // nothing selected
 191                                         } else {
 192                                                 // show dropdown
 193                                                 showDropdown = true;
 194                                                 selectedIndex = 0;              // first item selected
 195                                         }
 196                                 }
 197                         } else {
 198                                 selectedIndex=-1;
 199                         }
 200                 }
 201
 202                 override protected function updateDisplayList(unscaledWidth:Number,
 203                                                                   unscaledHeight:Number):void {
 204
 205                         super.updateDisplayList(unscaledWidth, unscaledHeight);
 206
 207                         if(selectedIndex == -1 && typedTextChanged && textInput.text!=typedText) {
 208                                 // not in menu
 209                                 // trace("not in menu"); trace("- restoring to "+typedText);
 210                                 textInput.text = typedText;
 211                                 textInput.setSelection(cursorPosition, cursorPosition);
 212                         } else if (dropdown && typedTextChanged && textInput.text!=typedText) {
 213                                 // in menu, but user has typed
 214                                 // trace("in menu, but user has typed"); trace("- restoring to "+typedText);
 215                                 textInput.text = typedText;
 216                                 textInput.setSelection(cursorPosition, cursorPosition);
 217                         } else if (showingDropdown && textInput.text==selectedLabel) {
 218                                 // force update if Flex has fucked up again
 219                                 // trace("should force update");
 220                                 textInput.htmlText=selectedLabel;
 221                                 textInput.validateNow();
 222                                 if (typedTextChanged) textInput.setSelection(cursorPosition, cursorPosition);
 223                         } else if (showingDropdown && textInput.text!=selectedLabel && !typedTextChanged) {
 224                                 // in menu, user has navigated with cursor keys/mouse
 225                                 // trace("in menu, user has navigated with cursor keys/mouse");
 226                                 textInput.text = selectedLabel;
 227                                 textInput.setSelection(0, textInput.text.length);
 228                         } else if (textInput.text!="") {
 229                                 textInput.setSelection(cursorPosition, cursorPosition);
 230                         }
 231
 232                         if (showDropdown && !dropdown.visible) {
 233                                 // controls the open duration of the dropdown
 234                                 super.open();
 235                                 showDropdown = false;
 236                                 showingDropdown = true;
 237                                 dropdownClosed = false;
 238                         }
 239                 }
 240
 241                 override protected function keyDownHandler(event:KeyboardEvent):void {
 242                         super.keyDownHandler(event);
 243
 244                         if (event.keyCode==Keyboard.UP || event.keyCode==Keyboard.DOWN) {
 245                                 typedTextChanged=false;
 246                         }
 247
 248                         if (event.keyCode==Keyboard.ESCAPE && showingDropdown) {
 249                                 // ESCAPE cancels dropdown
 250                                 textInput.text = typedText;
 251                                 textInput.setSelection(textInput.text.length, textInput.text.length);
 252                                 showingDropdown = false;
 253                                 dropdownClosed=true;
 254
 255                         } else if (event.keyCode == Keyboard.ENTER) {
 256                                 // ENTER pressed, so select the topmost item (if it exists)
 257                                 if (selectedIndex>-1) { textInput.text = selectedLabel; }
 258                                 dropdownClosed=true;
 259
 260                                 // and move on to the next field
 261                                 event.stopImmediatePropagation();
 262                                 selectNextField();
 263
 264                         } else if (event.ctrlKey && event.keyCode == Keyboard.UP) {
 265                                 dropdownClosed=true;
 266                         }
 267
 268                         prevIndex = selectedIndex;
 269                 }
 270
 271                 override public function getStyle(styleProp:String):* {
 272                         if (styleProp != "openDuration") {
 273                                 return super.getStyle(styleProp);
 274                         } else {
 275                                 if (dropdownClosed) return super.getStyle(styleProp);
 276                                 else return 0;
 277                         }
 278                 }
 279
 280                 override protected function textInput_changeHandler(event:Event):void {
 281                         super.textInput_changeHandler(event);
 282                         typedText = text;
 283                         typedTextChanged = true;
 284                 }
 285
 286                 override protected function measure():void {
 287                         super.measure();
 288                         measuredWidth = mx.core.UIComponent.DEFAULT_MEASURED_WIDTH;
 289                 }
 290
 291                 override public function set selectedIndex(value:int):void {
 292                         var prevtext:String=text;
 293                         super.selectedIndex=value;
 294                         text=prevtext;
 295                 }
 296
 297
 298                 //----------------------------------
 299                 //      filterFunction
 300                 //----------------------------------
 301                 /**
 302                  *      A function that is used to select items that match the
 303                  *      function's criteria.
 304                  *      A filterFunction is expected to have the following signature:
 305                  *
 306                  *      <pre>f(item:~~, text:String):Boolean</pre>
 307                  *
 308                  *      where the return value is <code>true</code> if the specified item
 309                  *      should displayed as a suggestion.
 310                  *      Whenever there is a change in text in the AutoComplete control, this
 311                  *      filterFunction is run on each item in the <code>dataProvider</code>.
 312                  *
 313                  *      <p>The default implementation for filterFunction works as follows:<br>
 314                  *      If "AB" has been typed, it will display all the items matching
 315                  *      "AB~~" (ABaa, ABcc, abAc etc.).</p>
 316                  *
 317                  *      <p>An example usage of a customized filterFunction is when text typed
 318                  *      is a regular expression and we want to display all the
 319                  *      items which come in the set.</p>
 320                  *
 321                  *      @example
 322                  *      <pre>
 323                  *      public function myFilterFunction(item:~~, text:String):Boolean
 324                  *      {
 325                  *         public var regExp:RegExp = new RegExp(text,"");
 326                  *         return regExp.test(item);
 327                  *      }
 328                  *      </pre>
 329                  *
 330                  */
 331
 332                 private var _filterFunction:Function = defaultFilterFunction;
 333                 private var filterFunctionChanged:Boolean = true;
 334
 335                 [Bindable("filterFunctionChange")]
 336                 [Inspectable(category="General")]
 337
 338                 public function get filterFunction():Function {
 339                         return _filterFunction;
 340                 }
 341
 342                 public function set filterFunction(value:Function):void {
 343                         //An empty filterFunction is allowed but not a null filterFunction
 344                         if(value!=null) {
 345                                 _filterFunction = value;
 346                                 filterFunctionChanged = true;
 347
 348                                 invalidateProperties();
 349                                 invalidateDisplayList();
 350
 351                                 dispatchEvent(new Event("filterFunctionChange"));
 352                         } else {
 353                                 _filterFunction = defaultFilterFunction;
 354                         }
 355                 }
 356
 357                 private function defaultFilterFunction(element:*, text:String):Boolean {
 358                         if (!text || text=='') return false;
 359                         var label:String = itemToLabel(element);
 360                         return (label.toLowerCase().substring(0,text.length) == text.toLowerCase());
 361                 }
 362
 363                 private function templateFilterFunction(element:*):Boolean {
 364                         var flag:Boolean=false;
 365                         if(filterFunction!=null)
 366                                 flag=filterFunction(element,typedText);
 367                         return flag;
 368                 }
 369
 370                 // Updates the dataProvider used for showing suggestions
 371                 private function updateDataProvider():void {
 372                         dataProvider = tempCollection;
 373                         collection.filterFunction = templateFilterFunction;
 374                         collection.refresh();
 375                 }
 376         }
 377 }