AutoComplete control provides suggestions once user has typed at least a preset amount of character. The main difference between AutoComplete and FilteringSelect is that AutoComplete queries for possible choices from the data store each time a user enters a text fragment.
| Description | ||
| new AutoComplete(params?srcNodeRef?) |
Create a new AutoComplete widget. |
| Type | Description | |
| _itemData | Dojo/store/Memory |
ItemData is a data in items. |
| _lastTextQuery | String |
Last text that used to query. |
| _lastTotalQuery | Number |
Number of records that returned in the last query. |
| _styleAttr | Object |
when you want to set style for other node. you can do this by example...
_styleAttr:{
|
| _timerChanged | dojox.timing.Timer |
Timer for 'delayChanged' property. |
| _timerDelay | Dojox/timing/Timer |
Timer for 'searchDelay' property. |
| active | Boolean |
If true, this forces the control to enter the active state and classname 'amos-form-active' will be added. |
| atcKey | String |
String that is used as a key for querying. |
| busy | Boolean |
If true, this forces the control to enter the busy state and classname 'amos-form-busy' will be added. |
| customIcons | DOMNode | String[] | Object[] | Add custom icons and their functionalities. This property can receive an array of DOM nodes of HTML markups or DOM nodes created from a widget creation. It allows an array of image path strings and CSS class strings. It also accepts an array consisting both types of inputs. |
| dataStore | DataStore | Object[] | String |
A data store is a repository of a set of data objects. |
| delayChanged | Number |
Number of milliseconds to wait until timing out before executes a function. Value ‘0’ means no timeout. |
| disabled | Boolean |
If true, any control's events(except change) are not responding. Its content cannot be edited and is excluded when the form is submitted. |
| displayedValue | String |
The value presently displays in the text box. |
| displayField | String | Field of data that is used to display on the control. |
| downArrowClass | String | Class for dropdown list arrow. |
| error | Boolean |
If true, this forces the control to enter the error state and classname 'amos-form-error' will be added. |
| errorMessageVisible | Boolean | If true, error message is visible when an error occur. Otherwise, nothing is shown when an error occrus. |
| errorType | String | Error type of text box (use constant.) |
| filled | Boolean |
A flag that shows whether a form element is filled in (true) or empty (false). |
| filter | Object | Function |
A data filter. |
| focused | Boolean |
If true, the element is focused. |
| hasClearIcon | Boolean | If true, a clear icon is shown near right border inside the text box once there is at least a character input. |
| hasDownArrow | Boolean | If true, an arrow for displaying a dropdown list is visible on the right side of the text box. |
| id | String | An unique id for a text box. (The specified value must be unique within the document.) |
| idProperty | String |
An unique id for an element. (The specified value must be unique within the document.) |
| ignoreCase | Boolean |
If true the query should ignore case when matching for possible items. |
| intermediateChanges | Boolean | If true, it will fires onChange event every change to the value of the text box. Otherwise, it will fire when the text box loses focus after its value was changed. |
| items | Dojo/store/Memory |
Items is a memory to collect a set of data. |
| label | String | Label of a text box. |
| leftIcons | DOMNode | String[] | Object[] | Add custom icons and their functionalities at the left of textbox. This property can receive an array of DOM nodes of HTML markups or DOM nodes created from a widget creation. It allows an array of image path strings and CSS class strings. It also accepts an array consisting both types of inputs. |
| maxHeight | String | Number |
The max height for dropdown. Any dropdown taller than this value will have a scrollbar. |
| maxLength | Number |
Maximum number of characters that can be entered. |
| maxRecords | Number |
Maximum number of records to display. Value '0' means show all records. |
| minChar | Number |
Minimum number of characters to start querying for suggestions. |
| name | String | Name of a text box. When sending a request to server, this property is the parameter's name. |
| placeHolder | String | Placeholder is a short hint that describes expected value of an input field. It is displayed in the input field before the user enters a value. |
| preventInjection | Boolean |
If true, prevent HTML injection. If false, allow HTML injection. If null, the control will refer to the web configuration file whether to prevent or allow HTML injection. |
| readOnly | Boolean |
If true, the control is read-only and cannot be edited. However, its content, if presents, is included in form submission. |
| regExp | String | RegExp | Regular expression pattern to be used for validation. |
| required | Boolean |
If true, the input field must be filled out before form submission. |
| rightIcons | DOMNode | String[] | Object[] | Add custom icons and their functionalities at the right of textbox. This property can receive an array of DOM nodes of HTML markups or DOM nodes created from a widget creation. It allows an array of image path strings and CSS class strings. It also accepts an array consisting both types of inputs. |
| searchDelay | Number |
Specifies the time delay in milliseconds between the user key press and the start of querying. |
| textAlign | String | Specify the alignment of value in text box. |
| trim | Boolean |
If true, blank spaces will be removed from both sides of a string. |
| type | String | Specify the type of value in text box to display. |
| unAssignedValue | Number | String | Unassigned value of a control. Control's value is cleared when this list entry is selected. |
| valid | Boolean | Validity flag that shows whether a text box is validated to be valid (true) or invalid (false). |
| value | String | Value of a text box. |
| valueField | String | Field of data that is used as a key of data. |
| viewMode | Boolean |
If true, the control will show only the displayedValue. |
| width | Number | String | Width of text box. |
| Return type | Description | |
| __baseClassInherit(constructor) | None |
get className from superclass. |
| _abortRequest() | None |
|
| appendBottomDropDown(node) | None |
Add item to bottom node. |
| appendDropDown(node) | None |
Add item to a drop-down list as the last child of the node. |
| bind(dataStore) | None |
Bind data to the control. |
| blur() | None |
Remove focus from an element. (Blur the element.) |
| clearBottomDropDown() | None |
Clear bottom node in drop-down. |
| clearDropDown() | None |
Clear items in drop-down list. |
| focus() | None |
Focus to an element. |
| hide(elem?) | None |
Hide a specified element. The hidden element will not be displayed at all. |
| hideDropDown() | None |
Hide drop-down list. |
| isValid() | Boolean | Returns true when text validation succeeded; otherwise, false. |
| isVisible(elem?) | Boolean |
Return true if the element is visible, otherwise false. |
| query() | None |
Query the data store. |
| reset() | None | Reset all state and value to default. |
| show(elem?) | None |
Display a specified element. |
| showDropDown(winBox) | None |
Show drop-down list. |
| showError(msgError) | None | Show error message. |
| toggle(elem?) | None |
Toggle visibility of a specified element. |
| toggleDropDown() | Boolean |
Toggle between hide() and show() a drop-down list. |
| unbind() | None |
Remove binded data from control |
| Description | ||
| bind-completed |
Fires when bind data completed. |
|
| blur |
Fires when an object loses focus. |
|
| change | Fires when the value of an element has been changed. | |
| click |
Fires when the user clicks on an element. |
|
| dblclick |
Fires when the user double-clicks on an element |
|
| focus |
Fires when an element gets focus. |
|
| icon-clear-click | Fires when user clicks icon for clear text in a text box. (Icon that appears on the rigth of text box.) | |
| icon-click | Fires when user clicks icon (custom icon). | |
| item-click | Fires when user clicks item. | |
| keydown |
Fires when the user is pressing a key (on the keyboard). |
|
| keypress |
Fires when the user presses a key (on the keyboard). |
|
| keyup |
Fires when the user releases a key (on the keyboard). |
|
| mousedown |
Fires when a user presses a mouse button over an element. |
|
| mouseout |
Fires when the mouse pointer is moved out of an element. |
|
| mouseover |
Fires when the mouse pointer is moved onto an element. |
|
| mouseup |
Fires when a user releases a mouse button over an element. |
|
| paste |
Fires when the user pastes some content in an element. |
|
| query-data-completed |
Fires when query data completed. |
|
| query-data-error |
Fires when query data error. |
|
| query-data-start |
Fires when start query data. |
ItemData is a data in items.
when you want to set style for other node. you can do this by example...
_styleAttr:{
style-property:effected-node
}
this property was effected where this class was inherited and your widget was called by...
var widget = new YourWidget({
style:{
style-property:style-value
}
});
now effected-node in you widget will have style-property = style-value
Default value: {}
Timer for 'delayChanged' property.
Timer for 'searchDelay' property.
Default value: null
If true, this forces the control to enter the active state and classname 'amos-form-active' will be added.
Default value: false
If true, this forces the control to enter the busy state and classname 'amos-form-busy' will be added.
Default value: false
Number of milliseconds to wait until timing out before executes a function. Value ‘0’ means no timeout.
Default value: 0
If true, any control's events(except change) are not responding. Its content cannot be edited and is excluded when the form is submitted.
Default value: false
If true, this forces the control to enter the error state and classname 'amos-form-error' will be added.
Default value: false
Default value: true
A flag that shows whether a form element is filled in (true) or empty (false).
Default value: false
A data filter.
// 1. for type of Function
this.set("filter", lang.hitch(this, function (item) {
return item["CHECK"] == true;
}));
// 2. for type of Object
this.set("filter", { CHECK: true });Default value: true
Default value: true
An unique id for an element. (The specified value must be unique within the document.)
Default value: "id"
If true the query should ignore case when matching for possible items.
Default value: true
Default value: false
Items is a memory to collect a set of data.
The max height for dropdown. Any dropdown taller than this value will have a scrollbar.
Default value: 200
Maximum number of records to display. Value '0' means show all records.
Default value: 0
If true, prevent HTML injection. If false, allow HTML injection. If null, the control will refer to the web configuration file whether to prevent or allow HTML injection.
Default value: false
If true, the control is read-only and cannot be edited. However, its content, if presents, is included in form submission.
Default value: false
If true, the input field must be filled out before form submission.
Default value: false
Specifies the time delay in milliseconds between the user key press and the start of querying.
Default value: 300
If true, blank spaces will be removed from both sides of a string.
Default value: true
Default value: 0
Default value: false
get className from superclass.
<Object>
constructor
|
Required |
|
Add item to bottom node.
<DOMNode>
node
|
Required |
item which you add |
Add item to a drop-down list as the last child of the node.
<DOMNode>
node
|
Required |
item which you add |
Bind data to the control.
<DataStore>
dataStore
|
Required |
dataStore for bind data to the control |
Remove focus from an element. (Blur the element.)
Clear bottom node in drop-down.
Clear items in drop-down list.
Focus to an element.
Hide a specified element. The hidden element will not be displayed at all.
<Node>
elem
|
Optional |
Specified element to be hidden. |
Hide drop-down list.
Return true if the element is visible, otherwise false.
<Node>
elem
|
Optional |
Specified element to be checked. If not specified, domNode of the widget is used instead. |
Query the data store.
Display a specified element.
<Node>
elem
|
Optional |
Specified element to be displayed. |
Show drop-down list.
<Object>
winBox
|
Required |
size of drop-down area |
<String>
msgError
|
Required |
Text for error message.
|
Toggle visibility of a specified element.
<Node>
elem
|
Optional |
Specified element to toggle visibility. |
Remove binded data from control
Fires when bind data completed.
<Object>
data
|
Data that bind to the control. |
<Object>
evt
|
-javascript event object
|
Fires when the user double-clicks on an element
<Object>
evt
|
javascript event object |
<Object>
evt
|
-javascript event object
|
Fires when the user is pressing a key (on the keyboard).
<Object>
evt
|
javascript event object |
Fires when the user presses a key (on the keyboard).
<Object>
evt
|
javascript event object |
Fires when the user releases a key (on the keyboard).
<Object>
evt
|
javascript event object |
Fires when a user presses a mouse button over an element.
<Object>
evt
|
javascript event object |
Fires when the mouse pointer is moved out of an element.
<Object>
evt
|
javascript event object |
Fires when the mouse pointer is moved onto an element.
<Object>
evt
|
javascript event object |
Fires when a user releases a mouse button over an element.
<Object>
evt
|
javascript event object |
Fires when the user pastes some content in an element.
<Object>
evt
|
javascript event object |
Fires when query data completed.
<Object>
response
|
Response when query data complete. |