new ng.AutoComplete (Object options) vs. 1.1.0 Full+Lite

The AutoComplete component provides suggestions while the user types in the input field. The data source can be a JavaScript array, remote source (through Ajax, not available in the Lite version) or the options from a select drop down menu.

Parameters

Object options vs. 1.1.0 Full+Lite
An optional key value object that holds the auto complete component properties.

Examples

Basic ng.AutoComplete
In this example, we'll create a few different versions of the ng.AutoComplete components to show the different options.
Demo:
From Select Menu: In this example, you can type in the numbers from the value or the label. For example, type t or 2


From a Simple Array:

From a Complex Array: In this example, the array indices contains and object with the following keys: "value", "text" and "html". The value key is the only required key and is the value submitted to the server. The text will be used in the input field and the html will be used as the drop down menu code. Type T, F, 1, 2 ...
Grouping Results
In this example, we'll show how to add a group title or category into the results.
Demo:
From Select Menu: Type A, B or C


From Source Array: Type A, B or C
Multiple Selection & Remote Data
In this example, we'll show how to create a multiple selection options.
Sample Remote Data: //www.nogray.com/api/autocomplete_search.php?text=ng.cal&precaret=ng.c&postcaret=al&rand=1354936836770
Demo:
From Select Menu: Type A, B or C


From Source Array: Type A, B or C

Inheritance Tree

This class inherits the following classes and all their methods and properties. It's recommended to check if any private properties/options are defined before using them. The complete list of inheritted methods and events are listed below the current object Custom Events.
ng.Events ()
ng.PlugIn (options)
ng.Component (options)
ng.AutoComplete (options)

Methods

Custom Data Types vs. 1.1.0 Full+Lite
By default, the ng.AutoComplete component includes three pre-defined data types; "self", "array" and "remote".
Function ng.AutoComplete.select_option (value) vs. 1.1.0 Full+Lite
Select an option value. This method will not enforce the force_selection option and will populate the field with the values passed regardless.
Function ng.AutoComplete.get_selected () vs. 1.1.0 Full+Lite
Gets the select option.
Function ng.AutoComplete.get_first_selected () vs. 1.1.0 Full+Lite
Gets the first selected option. If nothing is selected, null will be returned.
Function ng.AutoComplete.get_last_selected () vs. 1.1.0 Full+Lite
Gets the last selected option. If nothing is selected, null will be returned.
Function ng.AutoComplete.select_step (step) vs. 1.1.0 Full+Lite
Select a step from the auto complete suggestions.
Function ng.AutoComplete.select_first_step () vs. 1.1.0 Full+Lite
Select the first step from the auto complete suggestions.
Function ng.AutoComplete.select_current_step () vs. 1.1.0 Full+Lite
Select the current highlighted step.
 
Function ng.AutoComplete.clear_focus () vs. 1.1.0 Full+Lite
Clears the focus from the auto complete suggestions.
Function ng.AutoComplete.step (step) vs. 1.1.0 Full+Lite
Steps through the suggestions in the auto complete list. This method will fire the onStep event.
Function ng.AutoComplete.step_down () vs. 1.1.0 Full+Lite
Step down the auto complete suggestions list. This function will fire the onStepDown event.
Function ng.AutoComplete.step_up () vs. 1.1.0 Full+Lite
Steps up in the auto complete suggestions list. This method will fire the onStepUp event.
Function ng.AutoComplete.is_input_empty () vs. 1.1.0 Full+Lite
Checks if the input field is empty or not (nothing is selected). If the display input field value is the same as the caption it will be considered empty.
Function ng.AutoComplete.get_current_focus () vs. 1.1.0 Full+Lite
Gets the current focus number.
 
Function ng.AutoComplete.get_hidden_input () vs. 1.1.0 Full+Lite
Gets the hidden input field. This is the field that will be submitted to the server.
Function ng.AutoComplete.get_txt_around_caret () vs. 1.1.0 Full+Lite
Gets the input field text around the caret.
Function ng.AutoComplete.get_search_regexp () vs. 1.1.0 Full+Lite
Gets the regular expression for searching the data source (for types array and self).
Function ng.AutoComplete.set_src (src) vs. 1.1.0 Full+Lite
Sets the data source array.
Function ng.AutoComplete.get_src () vs. 1.1.0 Full+Lite
Gets the data source.
Function ng.AutoComplete.set_minimum_length (Length) vs. 1.1.0 Full+Lite
Sets the minimum value length before showing the suggestions.
Function ng.AutoComplete.get_minimum_length () vs. 1.1.0 Full+Lite
Gets the minimum length before showing the auto complete suggestions.
Function ng.AutoComplete.set_number_results (max) vs. 1.1.0 Full+Lite
Sets the maximum number of suggestions results.
Function ng.AutoComplete.get_number_results () vs. 1.1.0 Full+Lite
Gets the maximum number of suggestions results.
Function ng.AutoComplete.set_force_selection (force_selection) vs. 1.1.0 Full+Lite
Set the force selection property.
Function ng.AutoComplete.get_force_selection () vs. 1.1.0 Full+Lite
Gets the force selection property.
Function ng.AutoComplete.set_remote_delay (delay) vs. 1.1.0 FULL ONLY
Sets the remote source delay option.
Function ng.AutoComplete.get_remote_delay () vs. 1.1.0 FULL ONLY
Gets the number of milliseconds for the remote source delay.
Function ng.AutoComplete.set_caption (caption) vs. 1.1.0 Full+Lite
Sets the input field caption text.
Function ng.AutoComplete.get_caption () vs. 1.1.0 Full+Lite
Gets the input field caption.
Function ng.AutoComplete.set_multi_selection (multi_selection) vs. 1.1.0 Full+Lite
Sets the multi selection option.
Function ng.AutoComplete.get_multi_selection () vs. 1.1.0 Full+Lite
Gets the multi selection option.
Function ng.AutoComplete.set_multi_selection_holder (holder) vs. 1.1.0 Full+Lite
Sets the HTML Element that will hold the multi selection values.
Function ng.AutoComplete.set_max_selection (max) vs. 1.1.0 Full+Lite
Sets the maximum number of options the user can select.
Function ng.AutoComplete.get_max_selection () vs. 1.1.0 Full+Lite
Gets the maximum number of options the user can select.

Custom Events

In the events' functions, the this will refer to the class object.
Event onKeyUp vs. 1.1.0 Full+Lite
Fires when the user release a keyboard key after typing a letter. this will refer to the ng.AutoComplete object and the key up event will be passed to this function
Event onKeyDown vs. 1.1.0 Full+Lite
Fires when the user presses a keyboard key. this will refer to the ng.AutoComplete object and the key down event will be passed to this function
Event onFocus vs. 1.1.0 Full+Lite
Fires when the input field receives focus. this will refer to the ng.AutoComplete object and the focus event will be passed to this function
Event onMouseWheel vs. 1.1.0 Full+Lite
Fires when the user rotate the mouse wheel inside the input field. this will refer to the ng.AutoComplete object and the focus event will be passed to this function
Event onBlur vs. 1.1.0 Full+Lite
Fires when the input field loses focus. this will refer to the ng.AutoComplete object and the focus event will be passed to this function
Event onChange vs. 1.1.0 Full+Lite
Fires when the user change the input field value. If force_selection is set to true and the user enters an invalid value, this event will remove the last letter of the input field value and fire again until it gets a valid value or an empty input field. this will refer to the ng.AutoComplete object and the focus event will be passed to this function
Event onLoad vs. 1.1.0 Full+Lite
Fires when the component is initiated and ready to be used. this will refer to the ng.AutoComplete object.
Event onSelect vs. 1.1.0 Full+Lite
Fires when the user select a new option. If the user select, the same option, the onAlreadySelected will be fired instead. this will refer to the ng.AutoComplete object and the value and text will be passed to the event function as arguments (e.g. my_func(value, text)).
Event onAlreadySelected vs. 1.1.0 Full+Lite
Fires when the user select an option that is already selected. this will refer to the ng.AutoComplete object and the value and text will be passed to the event function as arguments (e.g. my_func(value, text)).
Event onUnSelect vs. 1.1.0 Full+Lite
Fires when the user unselect a value. This can happen for multiple selection or when the user select a new option and something else was selected. Also, if the user clear the input field, the last selected option will be unselected. this will refer to the ng.AutoComplete object and the unselected value and text will be passed to the event function as arugments (e.g. my_func(value, text)).
Event onOptionRemove vs. 1.1.0 Full+Lite
Fires when the user click on the "Remove Icon" in the multiple selection list. this will refer to the ng.AutoComplete object and the value, text and the HTML Element that holds the option text will be passed as arguments to the event function. Also, the click event will be passed (e.g. my_func(value, text, element, evt)).
Event onOptionClick vs. 1.1.0 Full+Lite
Fires when the user click on the "Option Name" in the multiple selection list. this will refer to the ng.AutoComplete object and the value, text and the HTML Element that holds the option text will be passed as arguments to the event function. Also, the click event will be passed (e.g. my_func(value, text, element, evt)). and the focus event will be passed to this function
Event onStep vs. 1.1.0 Full+Lite
Fires when the user steps up or down (by clicking the up or down button or rotating the mouse wheel) in the suggestions list. this will refer to the ng.AutoComplete object and the step number will be passed as an argument to the event function.
Event onStepDown vs. 1.1.0 Full+Lite
Fires when the user steps down (by clicking the down button or rotating the mouse wheel) in the suggestions list. this will refer to the ng.AutoComplete object.
Event onStepUp vs. 1.1.0 Full+Lite
Fires when the user steps up (by clicking the up button or rotating the mouse wheel) in the suggestions list. this will refer to the ng.AutoComplete object.

ng.Events () Methods

Some of these methods might be overriden by the inheriting class.
Function ng.Events.add_event (evt, func) vs. 1.1.0 Full+Lite
The add_event method will attach an event listener to an object. When the event is fired, the listeners functions will be executed on last added first run approach.
Function ng.Events.add_events (obj) vs. 1.1.0 Full+Lite
This method works the same way as Events.add_event(evt, func) except it takes an object with a list of events and functions.
Function ng.Events.remove_event (evt, func) vs. 1.1.0 Full+Lite
Remove the function func from the event evt queue. When adding the event, you should add the function by reference. Anonymous functions cannot be removed.
Function ng.Events.remove_events (obj) vs. 1.1.0 Full+Lite
This method works the same way as Events.remove_event(evt, func) except it takes an object with a list of events and functions.
Function ng.Events.clear_events (evt) vs. 1.1.0 Full+Lite
Remove all the functions under the event name evt.
Function ng.Events.clear_all_events () vs. 1.1.0 Full+Lite
This function works the same way Events.clear_events(evt) except it removes all the events attached to the object.
Function ng.Events.fire_event (evt_nm, args, evt) vs. 1.1.0 Full+Lite
Executes all the functions in the event evt_nm queue. Functions are executed in lasted added first exectued order.

ng.PlugIn (options) Methods

Some of these methods might be overriden by the inheriting class.
Function ng.PlugIn.get_position () vs. 1.1.0 Full+Lite
Get the plugin holding object position.
Function ng.PlugIn.get_width () vs. 1.1.0 Full+Lite
Get the ng.PlugIn holding object width.
Function ng.PlugIn.get_heigh () vs. 1.1.0 Full+Lite
Get the ng.PlugIn holding object height.
Function ng.PlugIn.set_object (obj) vs. 1.1.0 Full+Lite
Sets the ng.PlugIn holding HTML Element. The HTML Element should hold all the output and handles any events.
Function ng.PlugIn.get_object () vs. 1.1.0 Full+Lite
Gets the HTML Elements that holds the ng.PlugIn output.
Function ng.PlugIn.make_id (txt) vs. 1.1.0 Full+Lite
Creates a unique id for the ng.PlugIn object.
Function ng.PlugIn.get_id () vs. 1.1.0 Full+Lite
Get's the plugin ID.
Function ng.PlugIn.set_language (lang) vs. 1.1.0 Full+Lite
Sets the plugin language and reset the HTML Element direction based on the language.
Function ng.PlugIn.get_language () vs. 1.1.0 Full+Lite
Gets the plugin language.
Function ng.PlugIn.remove () vs. 1.1.0 Full+Lite
Removes the plugin and all it's properties. This method will also remove any HTML Elements that are associated with the plugin.
Function ng.PlugIn.create_options (options, default) vs. 1.1.2 Full+Lite
Create the initial options for the plugin. This method doesn not alter the plugin variables, but return an object that can be assigned to a variable in the plugin.
Function ng.PlugIn.create_events () vs. 1.1.2 Full+Lite
Create the plugin events from the customized option. This method should be called after ng.PlugIn.create_options.
Function ng.PlugIn.get (prop) vs. 1.2.2 Full+Lite
Gets the plugin property. This method will check if there is a getter function for the plugin and return it's value, otherwise it'll return the raw property. This method is useful for getting custom properties.
Function ng.PlugIn.set (prop, value) vs. 1.2.2 Full+Lite
Sets the plugin property. This method will check if there is a setter method for the plugin and call it. Otherwise, it will set the raw property value.This method is useful for setting custom properties.

ng.Component (options) Methods

Some of these methods might be overriden by the inheriting class.
Function ng.Component.set () vs. 1.1.0 Full+Lite
Sets the ng.Component default values and prepare it's HTML structure.
Function ng.Component.set_parent (parent) vs. 1.1.0 Full+Lite
Sets the ng.Component parent object. This allows for nested components.
Function ng.Component.get_parent () vs. 1.1.0 Full+Lite
Gets the parent component.
Function ng.Component.get_parents_components () vs. 1.1.0 Full+Lite
Gets an array of all the component parents.
Function ng.Component.get_children_components () vs. 1.1.0 Full+Lite
Gets an array of all the children components.
Function ng.Component.set_html (html, append, eval_script) vs. 1.1.0 Full+Lite
Sets the component HTML code. Review ng.Element.set_html for more details.
Function ng.Component.get_html () vs. 1.1.0 Full+Lite
Gets the component HTML code.
Function ng.Component.open () vs. 1.1.0 Full+Lite
Opens the component and fires the onOpen event.
Function ng.Component.close () vs. 1.1.0 Full+Lite
Closes the component and fires the onClose event.
Function ng.Component.toggle () vs. 1.1.0 Full+Lite
Opens or closes the component.
Function ng.Component.reposition (obj) vs. 1.1.0 Full+Lite
Reposition the component based on the object position. This method is useful when the placement is the opposite to the language direction and the content changes regularly when the component is open.
Function ng.Component.get_content_div () vs. 1.2.0 Full+Lite
Get the div HTML Element that holds the component content.
Function ng.Component.set_button_ui_class () vs. 1.2.0 Full+Lite
Set the button UI CSS class name option.
Function ng.Component.get_button_ui_class () vs. 1.2.0 Full+Lite
Gets the buttons UI CSS class name.
Function ng.Component.is_open () vs. 1.1.0 Full+Lite
Checks if the component is open.
Function ng.Component.is_close () vs. 1.1.0 Full+Lite
Checks if the component is closed.
Function ng.Component.disable () vs. 1.1.0 Full+Lite
Disables the component and any associated buttons and input field. This method will first the onDisable event.
Function ng.Component.enable () vs. 1.1.0 Full+Lite
Enables the component and any associated buttons and input field. This method will fires the onEnable event.
Function ng.Component.is_enabled () vs. 1.1.0 Full+Lite
Checks if the component is enabled.
Function ng.Component.is_disabled () vs. 1.1.0 Full+Lite
Checks if the component is disabled.
Function ng.Component.set_input (object) vs. 1.1.0 Full+Lite
Sets the component input field. If the component already has an input set, it will remove the events from the original input field.
Function ng.Component.get_input () vs. 1.1.0 Full+Lite
Gets the input field for the component.
Function ng.Component.set_button (btn) vs. 1.1.0 Full+Lite
Sets the component button. When the ng.[NG[Link=Button]Button is clicked, it will toggle the component.
Function ng.Component.get_button () vs. 1.1.0 Full+Lite
Gets the components button.
Function ng.Component.set_placement (placement) vs. 1.1.0 Full+Lite
Sets the component placement.
Function ng.Component.get_placement () vs. 1.1.0 Full+Lite
Gets the component's placement.
Function ng.Component.set_offset (offset) vs. 1.1.0 Full+Lite
Sets the component's offset.
Function ng.Component.get_offset () vs. 1.1.0 Full+Lite
Gets the component's offset.
Function ng.Component.set_visible (visible) vs. 1.1.0 Full+Lite
Sets the component's visibility.
Function ng.Component.get_visible () vs. 1.1.0 Full+Lite
Gets the component visibility.
Function ng.Component.set_open_onfocus (open_focus) vs. 1.1.0 Full+Lite
Sets the component open_onfocus property.
Function ng.Component.get_open_onfocus () vs. 1.1.0 Full+Lite
Gets the component open_onfocus property.
Function ng.Component.set_open_onclick (open_click) vs. 1.1.0 Full+Lite
Sets the component open_onclick property.
Function ng.Component.get_open_onclick () vs. 1.1.0 Full+Lite
Gets the component open_onclick property.
Function ng.Component.get_input_html () vs. 1.1.4 Full+Lite
Get the HTML table code for an input field and button holder. The code will not contain the input or the button.

ng.PlugIn (options) Custom Events

In the events' functions, the this will refer to the class object.
Event onBeforeRemove vs. 1.2.2 Full+Lite
This event will fire right before the plugin (or any object that inherit it, e.g. components) is removed.

ng.Component (options) Custom Events

In the events' functions, the this will refer to the class object.
Event onOpen vs. 1.1.0 Full+Lite
Fires when the component is opened.
Event onClose vs. 1.1.0 Full+Lite
Fires when the component is closed.
Event onEnable vs. 1.1.0 Full+Lite
Fires when the component is enabled.
Event onDisable vs. 1.1.0 Full+Lite
Fires when the component is disabled.

API Menu