FilteringSelect control allows a user to select one of choices from a drop-down list as an input. Unlike Select widget and more like AutoComplete widget, it also allows a user to type a text fragment to filtering down to more likely choices. However, unlike AutoComplete, all values are binded to the control during initialization.
| Description | ||
| new FilteringSelect(params?srcNodeRef?) |
Create a new FilteringSelect widget. |
| Type | Description | |
| _itemData | Dojo/store/Memory |
ItemData is a data in items. |
| _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. |
| active | Boolean |
If true, this forces the control to enter the active state and classname 'amos-form-active' will be added. |
| 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 FilteringSelect. |
| 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 FilteringSelect will not check for matching cases during filtering. |
| 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. |
| 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. |
| 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). |
| validate | Boolean |
If true, the FilteringSelect will validate whether the typed input can be matched to at least one list entry. If there is no match, the control will show an error message. |
| value | String |
Value of the FilteringSelect. |
| 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) | Dojo/Deferred |
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. |
| 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.
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 FilteringSelect will not check for matching cases during filtering.
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
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
If true, blank spaces will be removed from both sides of a string.
Default value: true
Default value: 0
Default value: false
If true, the FilteringSelect will validate whether the typed input can be matched to at least one list entry. If there is no match, the control will show an error message.
Default value: true
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. |
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. |