ActiveDen

Autocomplete v2

Autocomplete can add prediction/history functionality to any text field with a simple line of code! As the user starts typing a list of close matches to their word or phrase appears.

What’s new in version 2.1

  • Mistyped words suggestion (Using tweaked Levenshtein distance)
  • Touch Friendly (Click and drag the list)
  • Slider with easing when dragging
  • New color properties allow full customization!
  • Full compatible with previous version (some minor changes -> see Compatibility Section
  • Code optimization

Two modes:
Predefined suggestions mode:
Pass an array of terms to the Autofill class and it would automatically be used as suggestions. Example of loading terms from a text file (.txt) is included.
History mode:
Everything the user types in the textfield (and hits return) is automatically saved in a shared object in order to be used later as suggestions.

Features: Both modes can be used more than one time on stage.
Automatic removal of duplicates terms (Most common terms or phrases appears on the top of the list).
Automatic sorting so the most recent features are on the top of the list. (History mode)
Infinite amount of words or phrases can be added the array in order to be used as suggestions.
Enable or disable the scrollbar. (Mouse scrolling is supported by the flash code included in this file but external javascript must be used in order to restrict the page from scrolling-mousetrap solution).
Set maximum results to be shown by the dropdown list.
Define if the suggestions would be case sensitive or case insensitive.
If a suggestion exceeds the width of the box, it will be automatically truncated to fit – e.g. autocomp…
Customizable (font colors, background colors, alpha).

Navigation:
Use the arrow keys or mouse to navigate through the suggestions, you can also enable touch control and drag the list of suggestions.
Hit ENTER with search result selected or click it to use the suggestion.
Hit ESCAPE to remove the list from the stage.
Hit TAB in order to use the selected suggestion and navigate to the next textfield.

How to use:

  1. import com.cyprog.utilities.AutoComplete
  2. Use the following line of code to define the textfield where AutoComplete will apply, and the autocomplete mode (predefined or history) var auto:AutoComplete=new AutoComplete(my_txt,false,false,sugArray);

Parameters:

  • @textfield where the AutoComplete will applied
  • @caseSensitivity (Boolean)
  • @scrollBar (Boolean)
  • @sugArray (Array with suggestions – used only in predefined mode)


Properties:

  • alpha
  • scrollBarAlpha: ScrollBar’s alpha. (In order to disable the scrollbar and have only the scroller visible)
  • maxSuggestions: The maximum number of suggestions which will be displayed without scrolling
  • enableTouchScrolling: Drag suggestion’s list
  • enableCorrections: If there is no match, display the closest possible suggestion

Color Properties:
  • backColor: Background Color
  • textColor: Text Color
  • selectedTextColor: Text Color when the suggestion is selected
  • selectedBackColor: Text’s Background Color when a suggestion is selected
  • suggestedTextColor: Text Color of the already typed letters in the suggestion list
  • suggestedMistypedTextColor: Text Color for mistyped letters in the suggestion list(when corrections are enabled)
  • selectedMistypedTextColor: Text Color when a mistyped suggestion is selected (when corrections are enabled)
  • selectedMistypedBackColor: Text’s background Color when a mistyped suggestion is selected(when corrections are enabled)
  • scrollerColor: Scroller’s Color
  • scrollBarColor: Scroller’s Line Color

Compatiblity
“textOverColor” property does not exist any more instead take a look at the color properties above.
If you used “lineColor” property after creating a new instance of the autocomplete class replace it with “scrollBarColor”.

Other applications for Touch Devices:

by
by
by
by
by