WebSquare.uiplugin.autoComplete

An extended version of the SelectBox. Displays the list of the selections based on the user's input.
Provides suggestions based on the user's input. The interactionMode property allows for real-time communication with the server for the display of the suggestions.
At the highest level of the AutoComplete is the div tag, and at the lower levels are various tags used.

Type

uiplugin

Property Summary

allowEmptySubmission: [default:false, true] Whether to search empty strings when the interactionMode is true.
caseSensitive: [default:true, false] Case-sensitivity for the search.
chooseOption: [default:false,true] Displays the selection options. In case the chooseOptionLabel is not defined, the label will be "-Choose-" and the value ""(empty string).
chooseOptionLabel: Define the text (label) to guide selection when the chooseOption is true.
chooseOptionValue: Value to guide selection
class: Same as the class property in HTML standard. One or more classes defined in the CSS file or in the style block can be applied (through the use of the space as the separator).
closeonmouseleave: [default:false, true] Closes the sub-layer upon the mouseleave event.
delimiter: Separates the value from the label. Used by the displayMode property.
direction: [defulat:auto, down, up, fit] List-opening direction
disabled: Disabled status of the component
disableEdit: [default:false, true] Enters the editing mode and displays the list only upon the user’s clicking.
displayFormatter: Name of the function to format the user-selected data.
displayMode: [default:label, value delim label, label delim value] Mode of display. Both the label and the value can be displayed. The separator (delim) is defined in the delimiter property.
editModeEvent: [default:onclick, onfocus] The event required to enter the edit mode.
editType: [default:select, focus] Type of editing upon the end user's focusing the input.(select: Select the text. focus: Move the cursor to the end of the text.)
escape: [default:false, true] Converts <>&" into HTML Escape string for display.
id: ID of the component. Allocated as a global object. Scripts access the component through the ID.
interactionEnterKey: [default:false, true] In case of interactionMode = "true", input a value and press Enter.
interactionMode: [default:false, true] Whether to enable the mode in which the search keyword list is received from outside.
keyInputRef: Ref value when the interactionMode is true. The keyword node is created under the specified XPath.
mandatory: [default:false, true] Whether to check the mandatory input or not when calling the validation API.
noResult: [default:previous, clear, noEnd, useData, first] Text display method when there is no search result.
noResultFirstItem: [default:false, true] Displays the first item when the AutoComplete is bound with a DataCollection and noResult=“first” setting is in use.
ref: Required to use the initial value of the AutoComplete component with a model or a DataCollection.
search: [default:start, contain, none] Search mode when interactionMode is false.
searchTarget: [default:label, value, both] Data to search based on the user's input (label, value, or both.)
selectedData: [default: true, false] Keeps the user’s selection when the selected data is not in the DataList bound.
sortMethod: [ascending,descending] Sorting method. Valid only when the sortOption is defined.
sortOption: [label,value] Sorting standard
submenuSize: [default:fixed, auto] Sub-menu sizing method, decide based on the label or use a fixed width.
submission: Submission ID when the interactioMode is true.
submissionFunc: Name of the user-defined function when the interactionMode is true.
tabIndex: Same as the tabindex property in HTML standard. Indicates the focusing order of the component by the tab key.
textAlign: [default:center, left, right] Text alignment
title: Same as the title property of HTML. Displays the Text upon the end user's hovering the mouse over the browser.
tooltipClass: Class to apply to the tooltip when the tooltipDisplay is true.
tooltipDisplay: [default:false, true] Whether to display the tooltip or not.
tooltipTime: Time to display the tooltip (in seconds) when the tooltipDisplay is true.
useKeywordHighlight: [default:false, true] Whether to highlight the keyword in the search result by applying a separate class.
useMousewheel: [default:true, false] Whether to allow the use of the mouse wheel on the label.
userData1: User-defined property
userData2: User-defined property
userData3: User-defined property
visibleRowNum: To be removed after over-riding.
wmode: [default:false, true] Use wmode. To be used when the component is hidden by an object (such as activeX or flash).

Event Summary

onchange: Triggered upon a change in the (selected) value.
onviewchange: Triggered when the value on the list is changed through keyboard input or mouse clicking.

Method Summary

addClass( className ): Adds a class to the component.
addItem( label , value , nodest , index ): Adds an item to the list.
bind( eventType , function ): Dynamically allocates events to the component.
changeClass( oldClassName , newClassName ): Renames the class from oldClassName to newClassName.
disableEdit( onoff ): Disables the editing mode but displays the item list to allow the user;s selection.
focus( ): Moves the focus to the component.
getDisabled( ): Gets the current value of the disabled property.
getGenerator( ): Called by a component under the Generator component. When called, gets the parent Generator object.
getID( ): Gets the ID of the component.
getItem( index ): Returns the item information of the specified index.
getItemCount( ): Returns the number of the items on the list.
getOpacity( ): Gets the opacity of the component defined in CSS.
getPluginName( ): Gets the pluginName (or the name) of the component.
getPosition( positionName ): Gets the left or top position of the component.
getReadOnly( ): Gets the current setting of the readOnly property.
getSearchedItems( ): Returns the searched items as an array.
getSelectedIndex( ): Returns the index of the selected item.
getSelectedRow( ): Returns the object that stores the value of the selected row.
getSize( sizeName ): Gets the size of the component.
getStyle( propertyName ): Gets the current value of the propertyName of the component defined in CSS.
getStyleValue( style ): [deprecated] Use getStyle instead.
getText( isOriginal ): Gets the label of the currently selected item.
getTitle( ): Gets the title value.
getUserData( key ): Returns the user-defined property value set by setUserData as the user data or source (page XML).
getValue( ): Gets the value of the title property.
hasClass( className ): Checks whether the component has className received as a parameter or not.
hide( ): Hides the component.
initAutoComplete( ): Initializes the AutoComplete component.
openTable( ): Opens the sub-layers of the AutoComplete component.
removeClass( className ): Removes className from the component.
setDisabled( disabled ): Sets the disabled property.
setDummyData( value , label ): Saves the received value and the label.
setEditMode( ): Moves focus to the input of the AutoComplete component.
setEventPause( evList , flag ): Disables or enables the component event.
setItem( label , value , nodest , index ): Changes the label and the value of the specified index on the itemTable.
setItemSet( nodeset , label , value ): Sets the itemset.
setNodeSet( nodeset , label , value ): Changes the itemset setting. When bound with a DataList, the nodeset must start with data: prefix.
setOpacity( value ): Sets the opacity of the component.
setPosition( left , top , mode ): Sets the position (left, top) of the component.
setReadOnly( readOnly ): Controls the "readOnly" property.
setRef( ref ): Dynamically sets the ref binding.
setSize( width , heigth ): Sets the size (width, height) of the component.
setStyle( propertyName , value ): Sets the style of the specified property.
setText( label , isOriginal ): Selects an item that has the label specified as an argument.
setTitle( title ): Sets the title of the component.
setUserData( key , value ): Sets the user data in the component.
setValue( value ): Selects an item with the value specified as the argument.
show( displayType ): Displays the component.
toggleClass( className ): Removes a class named className, or if there is no such a class, adds a class named className.
trigger( type , array ): Triggers a certain event registered for the component.
unbind( type , function ): Removes an event registered for the component.
unbindRef( ): Releases the ref binding.
validate( ): Validates the AutoComplete component.
validateObject( ): Validates the component according to the specified properties.
visible( flag ): [deprecated] Shows/Hides the component, or sets the visible property using setStyle.

Property Detail

allowEmptySubmission: [default:false, true] Whether to search empty strings when the interactionMode is true.
caseSensitive: [default:true, false] Case-sensitivity for the search.
chooseOption: [default:false,true] Displays the selection options. In case the chooseOptionLabel is not defined, the label will be "-Choose-" and the value ""(empty string).
chooseOptionLabel: Define the text (label) to guide selection when the chooseOption is true.
chooseOptionValue: Value to guide selection
class: Same as the class property in HTML standard. One or more classes defined in the CSS file or in the style block can be applied (through the use of the space as the separator).
WebSquare5 Engine applies different classes to different components. By defining a common class, the common class can be applied to multiple components.
closeonmouseleave: [default:false, true] Closes the sub-layer upon the mouseleave event.
delimiter: Separates the value from the label. Used by the displayMode property.
Used as the "delim" in the displayMode property.
direction: [defulat:auto, down, up, fit] List-opening direction
disabled: Disabled status of the component
disableEdit: [default:false, true] Enters the editing mode and displays the list only upon the user’s clicking.
displayFormatter: Name of the function to format the user-selected data.
The function formats the value returned by the WebSquare Engine and returns the formatted value.
displayMode: [default:label, value delim label, label delim value] Mode of display. Both the label and the value can be displayed. The separator (delim) is defined in the delimiter property.
editModeEvent: [default:onclick, onfocus] The event required to enter the edit mode.
editType: [default:select, focus] Type of editing upon the end user's focusing the input.(select: Select the text. focus: Move the cursor to the end of the text.)
escape: [default:false, true] Converts <>&" into HTML Escape string for display.
id: ID of the component. Allocated as a global object. Scripts access the component through the ID.
interactionEnterKey: [default:false, true] In case of interactionMode = "true", input a value and press Enter.
Executes the submission. Not function when the interactionKey is "all".
interactionMode: [default:false, true] Whether to enable the mode in which the search keyword list is received from outside.
keyInputRef: Ref value when the interactionMode is true. The keyword node is created under the specified XPath.
(Example ) For keyInputRef="req/search", keyword
mandatory: [default:false, true] Whether to check the mandatory input or not when calling the validation API.
noResult: [default:previous, clear, noEnd, useData, first] Text display method when there is no search result.
previous: Sets the previous value (valid when the interactionMode is false.) clear: Clears the input. noEnd: Keeps the editMode. useData: Uses the input. first: Uses the first searched data.
noResultFirstItem: [default:false, true] Displays the first item when the AutoComplete is bound with a DataCollection and noResult=“first” setting is in use.
true: Selects the first item.
false (Default): Does not select the first item.
ref: Required to use the initial value of the AutoComplete component with a model or a DataCollection.
search: [default:start, contain, none] Search mode when interactionMode is false.
start: Items starting with the first character of the input. contain: All items containing the input. none: Items completely matching with the input.
searchTarget: [default:label, value, both] Data to search based on the user's input (label, value, or both.)
label (Default): Searches labels.
value: Searches values.
both: Searches both labels and values.
selectedData: [default: true, false] Keeps the user’s selection when the selected data is not in the DataList bound.
true (Default): Keeps the newly selected item and ignores the previously selected item.
false: Keeps the selection.
sortMethod: [ascending,descending] Sorting method. Valid only when the sortOption is defined.
sortOption: [label,value] Sorting standard
submenuSize: [default:fixed, auto] Sub-menu sizing method, decide based on the label or use a fixed width.
submission: Submission ID when the interactioMode is true.
Cannot be used with submissionFunc. The submission is executed depending on the inkeractionKey.
submissionFunc: Name of the user-defined function when the interactionMode is true.
Not to be used with submissionFunc. Called depending on value of the interactionKey property.
tabIndex: Same as the tabindex property in HTML standard. Indicates the focusing order of the component by the tab key.
textAlign: [default:center, left, right] Text alignment.
title: Same as the title property of HTML. Displays the Text upon the end user's hovering the mouse over the browser. Generally used to support web accessibility.
tooltipClass: Class to apply to the tooltip when the tooltipDisplay is true.
tooltipDisplay: [default:false, true] Whether to display the tooltip or not.
tooltipTime: Time to display the tooltip (in seconds) when the tooltipDisplay is true.
useKeywordHighlight: [default:false, true] Whether to highlight the keyword in the search result by applying a separate class.
true: If the value is true, "w2autoComplete_keyword" class will be applied to the keyword in the search result .
false (Default): Does not apply.
useMousewheel: [default:true, false] Whether to allow the use of the mouse wheel on the label.
userData1: User-defined property. Use getUserData("userData1") to get the data.
userData2: User-defined property. Use getUserData("userData2") to get the data.
userData3: User-defined property. Use getUserData("userData3") to get the data.
visibleRowNum: To be removed after over-riding.
wmode: [default:false, true] se wmode. To be used when the component is hidden by an object (such as activeX or flash).
sing the wmode (true) is to put the component above the object tag, not to set the wmode. It is recommended to use the wmode in the object tag (such as activeX or flash).

Event Detail

onchange

Triggered upon a change in the (selected) value.

onviewchange

Triggered when the value on the list is changed through keyboard input or mouse clicking.
In case the change was made by a script, no event will be triggered. (Similar to the native onchange event.)

Parameter
name	type	description
info	Object	An object containing information about previous selection and the present selection.

Sample

Method Detail

addClass( className )

Adds a class to the component.

Parameter
name	type	required	description
className	String	Y	Name of the class to add

Sample

// Add oddClass to component input1. input1.addClass("oddClass");

addItem( label , value , nodest , index )

Adds an item to the list.

Parameter
name	type	required	description
label	String	Y	Label of the item
value	String	Y	Value of the item
nodest	Element	Y	nodeset of the item
index	Number	N	Index of the item

Return
type	description
Boolean	Result of addItem. false means that the item has not been added.

Sample

Example: label is for the book title and value is for ISBN with () being used as delimiters. Weekend Getaways (9788959136315) var returnValue = autoComplete1.addItem("Weekend Getaways","9788959136315"); Weekend Getaways will be added to the end of the list.

bind( eventType , function )

Dynamically allocates events to the component.

Parameter
name	type	required	description
eventType	String	Y	Name of the event to allocate.
function	Function	Y	Handler function of the event to allocate.

Sample

// Define the event handler function for the onclick event in the input component, and bind the function. input1.bind("onclick", function(e){ alert(input1.getValue();})); // Bind commObj.ev_click function for the onclick event with component input1. var commObj = {}; commObj.ev_click = function(e){ alert("click :: "+this.id); }; input1.bind("onclick", commObj.ev_click );

changeClass( oldClassName , newClassName )

Renames the class from oldClassName to newClassName.
In the default setting, only the classes added by addClass will be applied. In order to directly remove the class defined in the "class" property of the component, add the following setting in config.xml file.
<style><removeDefaultClass value="true" /></style>

Parameter
name	type	required	description
oldClassName	String	Y	Name of the class to remove
newClassName	String	Y	Name of the class to add

Sample

// Define a class for the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> // Add the following to config.xml. <style> <removeDefaultClass value="true" /> </style> // Change tmpInputClass class to tmpInputWarninClass. input1.changeClass("tmpInputClass","tmpInputWarninClass");

disableEdit( onoff )

Disables the editing mode but displays the item list to allow the user;s selection.

Parameter
name	type	required	description
onoff	Boolean	Y	Editing mode status

focus( )

Moves the focus to the component.

getDisabled( )

Gets the current value of the disabled property.

Return
type	description
Boolean	The value of the disabled property.

Sample

var returnValue = componentId.getDisabled(); (Return example) false

getGenerator( )

Called by a component under the Generator component. When called, gets the parent Generator object.

Return
type	description
Object	Parent Generator object

Sample

<w2:generator id="generator1"> <w2:trigger id="trigger1" ev:onclick="scwin.trigger1_onclick"></w2:trigger></w2:generator> scwin.trigger1.onclick = function(){ console.log(this.getGenerator());} // Click trigger1 to display the generator1 object on the console. // See https://inswave.com/jira/browse/WPF-1425.

getID( )

Gets the ID of the component.

Return
type	description
String	ID of the WebSquare5 component

Sample

// The WebSquare5 component dynamically received as a parameter can be used as shown in the following. function fn_validCheck(tmpObj){ // tmpObj has an ID of "input1". var compID = tmpObj.getID(); // (Return Example) "input1" }

getItem( index )

Returns the item information of the specified index.

Parameter
name	type	required	description
index	Number	Y	Index of the item

Return
type	description
JSON	Object containing item information

Sample

// Define a DataList. <w2:dataList baseNode="list" id="dc_tmpList"> <w2:columnInfo> <w2:column id="country" name="label" dataType="text"></w2:column> <w2:column id="value" name="value" dataType="text"></w2:column> </w2:columnInfo> <w2:data use="true"> <w2:row> <country><![CDATA[네덜란드]]></country> <value><![CDATA[0016]]></value> </w2:row> <w2:row> <country><![CDATA[대한민국]]></country> <value><![CDATA[0022]]></value> </w2:row> <w2:row> <country><![CDATA[덴마크]]></country> <value><![CDATA[0023]]></value> </w2:row> </w2:data> </w2:dataList> // Define AutoComplete. (Bind with dc_tempList.) // To display both the label and the value, set displayMode as "label delim value" and delimiter as ": : ". <w2:autoComplete id="autoComplete1" style="position: relative;width:126px;height:21px;margin-right:10px;" displayMode="label delim value" delimiter="::" submenuSize="auto"> <w2:choices> <w2:itemset nodeset="data:dc_tmpList"> <w2:label ref="country"></w2:label> <w2:value ref="value"></w2:value> </w2:itemset> </w2:choices> </w2:autoComplete> // Call getItem and get the first object. var tmpObj = autoComplete1.getItem(0) // (Return Example) { "label":"The Netherlands::0016", "value":"0026", "orgLabel":"The Netherlands" }

getItemCount( )

Returns the number of the items on the list.

getOpacity( )

Gets the opacity of the component defined in CSS.

Return
type	description
Integer	Opacity

Sample

// Apply opacity CSS to the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;opacity:0.2;"></xf:input> var returnValue = input1.getOpacity(); // "returnValue" is a real number between 0 and 1. // (Return Value) "0.2"

getPluginName( )

Gets the pluginName (or the name) of the component.

Return
type	description
String	pluginName of the WebSquare5 component

Sample

// For a WebSquare5 object dynamically received by a common function, conditional statements can be used as shown below. var commObj = {}; commObj.fn_makeReqData = function(tmpObj){ var tmpID = tmpObj.getID(); // Component ID var tmpCompType = tmpObj.getPluginName(); // Component Type if(tmpCompType == "input"){ //..Logic.. }else if(tmpCompType == "gridView"){ //..Logic .. }else{ //..Logic.. } };

getPosition( positionName )

Gets the left or top position of the component. If set by %, the corresponding pixel value will be returned.

Parameter
name	type	required	description
positionName	String	Y	[left,top] Type of the position

Return
type	description
Number	Position of the component

Sample

// Apply margin CSS to the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;margin:10px;"></xf:input> var returnValue = input1.getPosition("top"); // The returnValue will be a position in pixels. // (Return Example) 10

getReadOnly( )

Gets the current setting of the readOnly property.

Return
type	description
Boolean	The current setting of the readOnly property

Sample

var returnValue = componentId.getReadOnly(); // (Return Example) false

getSearchedItems( )

Returns the searched items as an array.

Return
type	description
Array	One-dimensional array containing information of all items

Sample

// Define a DataList. <w2:dataList baseNode="list" id="dc_tmpList"> <w2:columnInfo> <w2:column id="country" name="label" dataType="text"></w2:column> <w2:column id="value" name="value" dataType="text"></w2:column> </w2:columnInfo> <w2:data use="true"> <w2:row> <country><![CDATA[네덜란드]]></country> <value><![CDATA[0016]]></value> </w2:row> <w2:row> <country><![CDATA[대한민국]]></country> <value><![CDATA[0022]]></value> </w2:row> <w2:row> <country><![CDATA[덴마크]]></country> <value><![CDATA[0023]]></value> </w2:row> </w2:data> </w2:dataList> // Define AutoComplete. (Bind with dc_tempList.) // To display both the label and the value, set displayMode as "label delim value" and delimiter as ": : ". <w2:autoComplete id="autoComplete1" style="position: relative;width:126px;height:21px;margin-right:10px;" displayMode="label delim value" delimiter="::" submenuSize="auto"> <w2:choices> <w2:itemset nodeset="data:dc_tmpList"> <w2:label ref="country"></w2:label> <w2:value ref="value"></w2:value> </w2:itemset> </w2:choices> </w2:autoComplete> // Call getSearchedItems. var tmpRsArr = autoComplete1.getSearchedItems(); // An array of three items // Get the first object. var tmpObj = tmpRsArr[0]; // (Return Example) { "label":"The Netherlands::0016", "value":"0026", "orgLabel":"The Netherlands", "index":0 }

getSelectedIndex( )

Returns the index of the selected item.
In case no selection is made, -1 will be returned.

Return
type	description
Number	Index of the selected item

getSelectedRow( )

Returns the object that stores the value of the selected row.
In case the grid itemset is in use, the selected rows will be returned.

Return
type	description
JSON	Object that stores information of the item - basic information.

Sample

// Define a DataList. <w2:dataList baseNode="list" id="dc_tmpList"> <w2:columnInfo> <w2:column id="country" name="label" dataType="text"></w2:column> <w2:column id="value" name="value" dataType="text"></w2:column> </w2:columnInfo> <w2:data use="true"> <w2:row> <country><![CDATA[네덜란드]]></country> <value><![CDATA[0016]]></value> </w2:row> <w2:row> <country><![CDATA[대한민국]]></country> <value><![CDATA[0022]]></value> </w2:row> <w2:row> <country><![CDATA[덴마크]]></country> <value><![CDATA[0023]]></value> </w2:row> </w2:data> </w2:dataList> // Define AutoComplete. (Bind with dc_tempList.) // To display both the label and the value, set displayMode as "label delim value" and delimiter as ": : ". <w2:autoComplete id="autoComplete1" style="position: relative;width:126px;height:21px;margin-right:10px;" displayMode="label delim value" delimiter="::" submenuSize="auto"> <w2:choices> <w2:itemset nodeset="data:dc_tmpList"> <w2:label ref="country"></w2:label> <w2:value ref="value"></w2:value> </w2:itemset> </w2:choices> </w2:autoComplete> // Upon users selecting the first item // Call getSelectedRow. var tmpObj = autoComplete1.getSelectedRow(); // (Return Example) { "label":"The Netherlands", "value":"0026" }

getSize( sizeName )

Gets the size of the component. If set by "%", the corresponding pixel value will be returned.

Parameter
name	type	required	description
sizeName	String	Y	[height, innerHeight, outerHeight, outerMarginHeight, width, innerWidth, outerWidth, outerMarginWidth] Type of the size. For the calculation of each size type, see below.

Return
type	description
Number	Size of the component

Sample

var returnValue = componentId.getSize("width"); // "returnValue" will be a size in pixels. If set by "%", the corresponding pixel value will be returned. // (Return Example) 100

getStyle( propertyName )

Gets the current value of the propertyName of the component defined in CSS.

Parameter
name	type	required	description
propertyName	String	Y	Name of the property in the style

Return
type	description
String	Style value

Sample

// Define an Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;"></xf:input> var returnValue = input1.getStyle("width"); // (Return Example) "144px"

getStyleValue( style )

[deprecated] Use getStyle instead.
Gets the current value of the propertyName of the component defined in CSS.

Parameter
name	type	required	description
style	String	Y	Name of the property defined in the style

Return
type	description
String	Value defined in the style property. (In case of a color, the hexcode of the color will be returned.)

getText( isOriginal )

Gets the label of the currently selected item.

Parameter
name	type	required	description
isOriginal	Boolean	N	[default:false, true] True to return the original, not formatted label.

Return
type	description
String	label of the currently selected item

Sample

// Define a DataList. <w2:dataList baseNode="list" id="dc_tmpList"> <w2:columnInfo> <w2:column id="country" name="label" dataType="text"></w2:column> <w2:column id="value" name="value" dataType="text"></w2:column> </w2:columnInfo> <w2:data use="true"> <w2:row> <country><![CDATA[네덜란드]]></country> <value><![CDATA[0016]]></value> </w2:row> <w2:row> <country><![CDATA[대한민국]]></country> <value><![CDATA[0022]]></value> </w2:row> <w2:row> <country><![CDATA[덴마크]]></country> <value><![CDATA[0023]]></value> </w2:row> </w2:data> </w2:dataList> // Define AutoComplete. (Bind with dc_tempList.) // To display both the label and the value, set displayMode as "label delim value" and delimiter as ": : ". <w2:autoComplete id="autoComplete1" style="position: relative;width:126px;height:21px;margin-right:10px;" displayMode="label delim value" delimiter="::" submenuSize="auto"> <w2:choices> <w2:itemset nodeset="data:dc_tmpList"> <w2:label ref="country"></w2:label> <w2:value ref="value"></w2:value> </w2:itemset> </w2:choices> </w2:autoComplete> // Upon users selecting the first item // Return the label on the current screen. var tmpObj = autoComplete1.getText(); // (Return Example) "The Netherlands::0016" // Returns the original label. var tmpObj = autoComplete1.getText(true); // (Return Example) "The Netherlands"

getTitle( )

Gets the title value.

Return
type	description
String	Title value

Sample

// Define the "title" for the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" title="이름 입력"></xf:input> var tmpTitle = input1.getTitle(); // (Return Example ) "Input Name"

getUserData( key )

Returns the user-defined property value set by setUserData as the user data or source (page XML).

Parameter
name	type	required	description
key	String	Y	Random data key

Return
type	description
String	Data of the corresponding key

Sample

// Apply the customized property (eduTest) to the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" eduTest="Hello"></xf:input> input1.getUserData("eduTest"); // (Return Example) "Hello" // Use setUserData. input1.setUserData("eduTest","WebSquare"); input1.getUserData("WebSquare"); // (Return Example) "Hello"

getValue( )

Gets the value of the title property.

Return
type	description
String	Value of the selected item

hasClass( className )

Checks whether the component has className received as a parameter or not.

Parameter
name	type	required	description
className	String	Y	className to check

Return
type	description
Boolean	Whether the component has the class or not

Sample

// Define a class for the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> var returnValue = input1.hasClass("tmpInputClass"); // (Return Example) true

hide( )

Hides the component.

initAutoComplete( )

Initializes the AutoComplete component.

Sample

autoComplete1.initAutoComplete();

openTable( )

Opens the sub-layers of the AutoComplete component.
Must be called after submission or submissionFunc when interactionMode is true.

removeClass( className )

Removes className from the component.
In the default setting, only the classes added by addClass will be applied. In order to directly remove the class defined in the "class" property of the component, add the following setting in config.xml file.
<style><removeDefaultClass value="true" /></style>

Parameter
name	type	required	description
className	String	Y	Name of the class to remove

Sample

// Define a class for the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> // Add the following to config.xml. <style> <removeDefaultClass value="true" /> </style> // Remove tmpInputClass class. input1.removeClass("tmpInputClass");

setDisabled( disabled )

Sets the disabled property. True to disable, or false not to disable.

Parameter
name	type	required	description
disabled	Boolean	Y	True to disable, or false not to disable.

Sample

// Disable the component. componentId.setDisabled(true);

setDummyData( value , label )

Saves the received value and the label.
The item will not be added to the list, and selectedIndex will be set as -1.

Parameter
name	type	required	description
value	String	Y	Value to save
label	String	Y	Label to save

Sample

// Set a random value. autoComplete1.setDummyData("0000","WebSquare"); // "WebSquare" is displayed. // Get the value. var tmpRs = autoComplete1.getValue(); // (Return Example) "0000" // Get the index of the selected item. var tmpIdx = autoComplete1.getSelectedIndex(); // In case of a non-selected item, -1 will be returned. // (Return Example) -1

setEditMode( )

Moves focus to the input of the component.

Sample

autoComplete1.setEditMode();

setEventPause( evList , flag )

Disables or enables the component event.

Parameter
name	type	required	description
evList	String	N	List of the events. If not specified, all user events of the component will be listed. (Enter null data.)
flag	Boolean	Y	true is to pause, or false is to cancel pausing.

Sample

input1.setEventPause("onclick", true); // Dynamically pauses the onclick event. input1.setEventPause("onfocus,onblur", false); // Restarts the onfocus and the onblur events. input1.setEventPause(null, true); // Pauses all user events registered for the Input component.

setItem( label , value , nodest , index )

Changes the label and the value of the specified index on the itemTable.

Parameter
name	type	required	description
label	String	Y	Label of the item
value	String	Y	Value of the item
nodest	Element	Y	nodeset of the item
index	Number	Y	Index of the item

setItemSet( nodeset , label , value )

Sets the itemset. The currently selected (or inputted) value remains the same.

Parameter
name	type	required	description
nodeset	String	N	Nodeset to set
label	String	N	Label to set
value	String	N	Value to set

Sample

// Bind dc_tmpSearchList with itemSet, and set disp column as label and code as value. autoComplete1.setItemSet("dc_tmpSearchList","disp","code");

setNodeSet( nodeset , label , value )

Changes the itemset setting. When bound with a DataList, the nodeset must start with data: prefix.

Parameter
name	type	required	description
nodeset	String	Y	Add data: prefix (or the XPath of the instance data) to the Id of the DataList.
label	String	N	ID of the column to be used as the label. If not specified, the existing value will be used. (Or XPath under the nodeset to set for the label.)
value	String	N	ID of the column to be used as the value. If not specified, the existing value will be used. (Or XPath under the nodeset to set for the value.)

Sample

// Define a DataList as shown below. <w2:dataList id="dataList1"> <w2:columnInfo> <w2:column id="lbl" dataType="text"></w2:column> <w2:column id="code" dataType="text"></w2:column> </w2:columnInfo> <w2:data use="true"> <w2:row> <lbl><![CDATA[zero]]></lbl> <code><![CDATA[0]]></code> </w2:row> <w2:row> <lbl><![CDATA[one]]></lbl> <code><![CDATA[1]]></code> </w2:row> </w2:data> </w2:dataList> // Change the itemset of autoComplete1 into dataList1, and set the label with lbl column and the vale with code column. autoComplete1.setNodeSet('data:dataList1','lbl','code'); // Change to dataList2 which has same columns with dataList1 but different data. autoComplete1.setNodeSet('data:dataList2'); // Maintain existing label and value and change only the dataList.

setOpacity( value )

Sets the opacity of the component.

Parameter
name	type	required	description
value	Number	Y	Opacity value (A real number between 0 and 1)

Sample

componentId.setOpacity(0.45);

setPosition( left , top , mode )

Sets the position (left, top) of the component.

Parameter
name	type	required	description
left	Number	Y	Left position or null.
top	Number	Y	Top position or null.
mode	String	N	[defulat:absolute, delta] absolute sets the current positions as x and y, and delta adds x and y to the current positions.

Sample

// Set the top position of the component as 100 pixels. componentId.setPosition(null, 100);

setReadOnly( readOnly )

Controls the "readOnly" property. True to enable, or false to disable.

Parameter
name	type	required	description
readOnly	Boolean	Y	True to enable, or false to disable.

Sample

// Enable the read-only. componentId.setReadOnly(true);

setRef( ref )

Dynamically sets the ref binding.

Parameter
name	type	required	description
ref	String	Y	XPath of the new ref

setSize( width , heigth )

Sets the size (width, height) of the component.

Parameter
name	type	required	description
width	Number	Y	Component width or null
heigth	Number	Y	Component height or null

Sample

// Set the component height as 100 pixels. componentId.setSize(null,100);

setStyle( propertyName , value )

Sets the style of the specified property.

Parameter
name	type	required	description
propertyName	String	Y	Name of the style property to set
value	String	Y	Value of the style to set

Sample

Example: Change the width in the component style. componentId.setStyle("width", 100); The width is in pixels, and the result will be same with that of componentId.setStyle("width", "100px");. In order to use % unit, specify as componentId.setStyle("width", "100%");.

setText( label , isOriginal )

Selects an item that has the label specified as an argument.

Parameter
name	type	required	description
label	String	Y	Label of the item
isOriginal	Boolean	N	[default:false, true] Whether to use the original label without the format being applied.

Sample

// Define a DataList. <w2:dataList baseNode="list" id="dc_tmpList"> <w2:columnInfo> <w2:column id="country" name="label" dataType="text"></w2:column> <w2:column id="value" name="value" dataType="text"></w2:column> </w2:columnInfo> <w2:data use="true"> <w2:row> <country><![CDATA[네덜란드]]></country> <value><![CDATA[0016]]></value> </w2:row> <w2:row> <country><![CDATA[대한민국]]></country> <value><![CDATA[0022]]></value> </w2:row> <w2:row> <country><![CDATA[덴마크]]></country> <value><![CDATA[0023]]></value> </w2:row> </w2:data> </w2:dataList> // Define AutoComplete. (Bind with dc_tempList.) // To display both the label and the value, set displayMode as "label delim value" and delimiter as ": : ". <w2:autoComplete id="autoComplete1" style="position: relative;width:126px;height:21px;margin-right:10px;" displayMode="label delim value" delimiter="::" submenuSize="auto"> <w2:choices> <w2:itemset nodeset="data:dc_tmpList"> <w2:label ref="country"></w2:label> <w2:value ref="value"></w2:value> </w2:itemset> </w2:choices> </w2:autoComplete> // Upon user's selecting an item of "Republic of Korea" label - The displayed label is selected. autoComplete1.setText("Republic of Korea::0022"); // (Display Example) "Republic of Korea::0022" is selected. // Upon users selecting an item of "Republic of Korea" label (through isOriginal parameter) autoComplete1.setText("Republic of Korea",true); // (Display Example) "Republic of Korea::0022" is selected. // In case the second parameter isOriginal is not given, autoComplete1.setText("Republic of Korea"); // (Display Example) No selection is made.

setTitle( title )

Sets the title of the component.

Parameter
name	type	required	description
title	String	Y	Property value

Sample

autoComplete1.setTitle("test"); // The title of autoComplete1 is "test".

setUserData( key , value )

Sets the user data in the component. If the key cannot be set for the component, corresponding logs will be displayed.

Parameter
name	type	required	description
key	String	Y	Random data key
value	String	Y	Random data key

Sample

// Setting a (key, value) pair of ("data", "WebSquare5") in the component. componentId.setUserData("data", "WebSquare"); // Some keys cannot be set for the component. componentId.setUserData("title", "WebSquare"); // (Log Example) !!!WARNING - [title] can't define as UserData

setValue( value )

Selects an item with the value specified as the argument.

Parameter
name	type	required	description
value	String	Y	Value of the item

Sample

show( displayType )

Displays the component.
The related CSS properties are display and visibility:show;.

Parameter
name	type	required	description
displayType	String	N	[default:block ,inline ,none ,""] Value of the Display property.

Sample

// Block the "display" property. componentId.show(); // Enable the "display" property in the class. componentId.show("");

toggleClass( className )

Removes a class named className, or if there is no such a class, adds a class named className.
In the default setting, only the classes added by addClass can be removed. To remove other classes, add the following setting in config.xml.
<style><removeDefaultClass value="true" /></style>

Parameter
name	type	required	description
className	String	Y	className to set

Sample

// Define a class for the Input component. <xf:input id="input1" style="position: relative;width: 144px;height: 21px;" class="tmpInputClass"></xf:input> // Add the following to config.xml. <style> <removeDefaultClass value="true" /> </style> // Remove tmpInputClass class. input1.toggleClass("tmpInputClass"); // Add tmpInputClass class again. input1.toggleClass("tmpInputClass");

trigger( type , array )

Triggers a certain event registered for the component.

Parameter
name	type	required	description
type	String	Y	Name of the event to trigger
array	Array	N	Array of parameters to send to the event handler

Sample

// Trigger the onclick event in the input1 component. input1.trigger("onclick"); // Trigger the onviewchange event in the input component and call the event handler function by sending arguments of (1, 2). input1.trigger("onviewchange", [1,2]);

unbind( type , function )

Removes an event registered for the component.

Parameter
name	type	required	description
type	String	N	Name of the event to remove. If not specified, all events of the components will be removed.
function	Function	N	Handler function of the event to remove. If not specified, all handler functions of the event will be removed.

Sample

// Remove all events registered in the input component. input1.unbind(); // Remove all handler functions of onviewchange event registered in the input component. input1.unbind("onviewchange"); // Remove the func1 event handler of onviewchange event registered for component input1. input1.unbind("onviewchange", func1);

unbindRef( )

Releases the ref binding.

validate( )

Validates the AutoComplete component. Checks whether mandatory fields are inputted or not.

Return
type	description
Boolean	Validation result (true or false)

Sample

When interactionMode is enabled, "true" will be returned regardless of the input status in the mandatory fields. var returnValue = autoComplete1.validate();

validateObject( )

Validates the component according to the specified properties.
Related Properties : mandatory, minLength, maxLength, minByteLength, maxByteLength
(Version: Added in 5.0_1.2783B.20170908.145609.)

Return
type	description
Object	object validation result object

Sample

// Define chooseOption and set mandatory as shown below. <w2:autoComplete id="autoComplete1" style="position: absolute;width:213px;height:74px;left:891px;top:69px;" chooseOption="true" mandatory="true" chooseOptionLabel="-선택-"> <w2:choices> <w2:itemset nodeset="data:dataList3"> <w2:label ref="label"></w2:label> <w2:value ref="value"></w2:value> </w2:itemset> </w2:choices> </w2:autoComplete> var returnObj = autoComplete1.validateObject(); // Return -without autoComplete value) An empty object will be returned. // Return - with autoComplete value) returnObj will be returned. returnObj.callerId = "autoComplete1" returnObj.type = "mandatory" returnObj.value = "" Usee displaymessage="true" setting of the AutoComplete. Then, the false return in the validation will alert a pre-defined message. //// (Alert Example) This field is mandatory.

visible( flag )

[deprecated] Shows/Hides the component, or sets the visible property using setStyle.
Sets the visibility of the component style. In case of true, set visible. In case of false, set hidden.

Parameter
name	type	required	description
flag	Boolean	Y	Visibility (In case of true, set visible. In case of false, set hidden.)