Yahoo! UI Library

node-tokeninput  3.3.0pr1

Yahoo! UI Library > node-tokeninput > Plugin.TokenInput
Search:
 
Filters

Class Plugin.TokenInput

Node plugin that turns a text input field into a tokenized input field similar to Cocoa's NSTokenField control.

Constructor

Plugin.TokenInput ( config )
Parameters:
config <Object> Configuration object.

Methods

_afterBlur

protected void _afterBlur ( e )
Handles blur events on the bounding box.
Parameters:
e <EventFacade>

_afterFauxInputChange

protected void _afterFauxInputChange ( e )
Handles changes to the fauxInput attribute.
Parameters:
e <EventFacade>

_afterFocus

protected void _afterFocus ( e )
Handles focus events on the bounding box.
Parameters:
e <EventFacade>

_afterInputValueChange

protected void _afterInputValueChange ( e )
Handles valueChange events on the token input node.
Parameters:
e <EventFacade>

_afterRemoveButtonChange

protected void _afterRemoveButtonChange ( e )
Handles changes to the removeButton attribute.
Parameters:
e <EventFacade>

_afterTokensChange

protected void _afterTokensChange ( e )
Handles changes to the tokens attribute.
Parameters:
e <EventFacade>

_bind

protected void _bind ( )
Binds token input events.

_clearItems

protected void _clearItems ( )
Removes and purges all items from the list, including the input field.

_createItem

protected Node _createItem ( options )
Creates and returns a new token list item.
Parameters:
options <Object> (optional) Item options.
Returns: Node
New item.

_focusNext

protected Boolean _focusNext ( node )
Focuses the token after the specified item node, or the input node if there is no next token.
Parameters:
node <Node>
Returns: Boolean
true if focus was set, false otherwise.

_focusPrev

protected Boolean _focusPrev ( node )
Focuses the token before the specified item node, if any.
Parameters:
node <Node>
Returns: Boolean
true if focus was set, false otherwise.

_getSelection

protected Object _getSelection ( node )
Returns an object containing the start and end indexes of selected text within the specified node.
Parameters:
node <Node>
Returns: Object
Object with start and end properties.

_keyBackspace

protected Boolean _keyBackspace ( e )
Handler for the backspace key.
Parameters:
e <EventFacade>
Returns: Boolean
false if the event should not be prevented.

_keyDelete

protected Boolean _keyDelete ( e )
Handler for the delete key.
Parameters:
e <EventFacade>
Returns: Boolean
false if the event should not be prevented.

_keyDown

protected Boolean _keyDown ( e )
Handler for the down arrow key.
Parameters:
e <EventFacade>
Returns: Boolean
false if the event should not be prevented.

_keyEnter

protected Boolean _keyEnter ( e )
Handler for the enter key.
Parameters:
e <EventFacade>
Returns: Boolean
false if the event should not be prevented.

_keyLeft

protected Boolean _keyLeft ( e )
Handler for the left arrow key.
Parameters:
e <EventFacade>
Returns: Boolean
false if the event should not be prevented.

_keyRight

protected Boolean _keyRight ( e )
Handler for the right arrow key.
Parameters:
e <EventFacade>
Returns: Boolean
false if the event should not be prevented.

_keyUp

protected Boolean _keyUp ( e )
Handler for the up arrow key.
Parameters:
e <EventFacade>
Returns: Boolean
false if the event should not be prevented.

_onKey

protected void _onKey ( e )
Handles keydown or keypress events on tokens and the token input field.
Parameters:
e <EventFacade>

_onRemoveClick

protected void _onRemoveClick ( e )
Handles click events on token remove buttons.
Parameters:
e <EventFacade>

_onTokenBlur

protected void _onTokenBlur ( e )
Handles blur events on tokens.
Parameters:
e <EventFacade>

_onTokenFocus

protected void _onTokenFocus ( e )
Handles focus events on tokens.
Parameters:
e <EventFacade>

_onTokenMouseOut

protected void _onTokenMouseOut ( e )
Handles mouseout events on tokens.
Parameters:
e <EventFacade>

_onTokenMouseOver

protected void _onTokenMouseOver ( e )
Handles mouseover events on tokens.
Parameters:
e <EventFacade>

_refresh

protected void _refresh ( )
Refreshes the _tokenNodes NodeList, which is used internally to track token item nodes.

_render

protected void _render ( )
Renders the token input markup.

_renderList

protected void _renderList ( )
Renders the token list.

_setTokens

protected Array _setTokens ( tokens )
Setter for the tokens attribute.
Parameters:
tokens <Array> Array of token strings.
Returns: Array
Array of trimmed token strings, with any empty strings removed.

_sync

protected void _sync ( )
Synchronizes the tokenInput's UI state with the internal state.

_syncHost

protected void _syncHost ( )
Synchronizes the value of the host input field with the current set of tokens in the tokenInput, joined with the configured delimiter.

_tokenizeValue

protected Array _tokenizeValue ( node , value , options )
Tokenizes the value of the specified node (or the passed value if one is provided) and returns an array of tokens. Optionally also adds the tokens to the tokenInput's UI.
Parameters:
node <Node> (optional) Node whose value should be tokenized. If not provided, the token input node will be used.
value <String> (optional) Value to be tokenized. If not specified, the value of the node will be used.
options <Object> (optional) Options object with zero or more of the following properties:
all (Boolean)
If true, the entire value will be split on the delimiter string and tokenized. If false (the default), all but the last token will be tokenized, and the last one will be left in the value.
updateUI (Boolean)
If true (the default), tokens parsed out of the value will be added to the tokenInput UI. If false, parsed tokens will be returned, but the UI and the tokens attribute will not be updated.
Returns: Array
Array of parsed tokens.

add

void add ( newTokens , index )
Adds one or more tokens at the specified index, or at the end of the token list if no index is specified.
Parameters:
newTokens <Array|String> Token string or array of token strings.
index <Number> (optional) 0-based index at which to add the token.
Chainable: This method is chainable.

clear

void clear ( )
Removes all tokens.
Chainable: This method is chainable.

remove

void remove ( index )
Removes the token at the specified index.
Parameters:
index <Number> 0-based index of the token to remove.
Chainable: This method is chainable.

Events

boundingBoxChange

boundingBoxChange ( event )
Fires when the value for the configuration attribute 'boundingBox' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

contentBoxChange

contentBoxChange ( event )
Fires when the value for the configuration attribute 'contentBox' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

delimiterChange

delimiterChange ( event )
Fires when the value for the configuration attribute 'delimiter' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

fauxInputChange

fauxInputChange ( event )
Fires when the value for the configuration attribute 'fauxInput' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

inputNodeChange

inputNodeChange ( event )
Fires when the value for the configuration attribute 'inputNode' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

listNodeChange

listNodeChange ( event )
Fires when the value for the configuration attribute 'listNode' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

removeButtonChange

removeButtonChange ( event )
Fires when the value for the configuration attribute 'removeButton' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

tokenizeOnBlurChange

tokenizeOnBlurChange ( event )
Fires when the value for the configuration attribute 'tokenizeOnBlur' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

tokenizeOnEnterChange

tokenizeOnEnterChange ( event )
Fires when the value for the configuration attribute 'tokenizeOnEnter' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

tokensChange

tokensChange ( event )
Fires when the value for the configuration attribute 'tokens' is changed. You can listen for the event using the on method if you wish to be notified before the attribute's value has changed, or using the after method if you wish to be notified after the attribute's value has changed.
Parameters:
event <Event.Facade> An Event Facade object with the following attribute specific properties added:
prevVal
The value of the attribute, prior to it being set
newVal
The value the attribute is to be set to
attrName
The name of the attribute being set
subAttrName
If setting a property within the attribute's value, the name of the sub-attribute property being set

Configuration Attributes

boundingBox - Node

Reference to the bounding box node.

contentBox - Node

Reference to the content box node.

delimiter - String

Token delimiter string. May be a single character or multiple characters. User input will be split on this string as the user types, and the delimited values will be turned into tokens.
Default Value: ','

fauxInput - Boolean

If true, the CSS class name yui3-tokeninput-fauxinput will be applied to the bounding box. When using the Sam skin, this will cause the TokenInput's styling to mimic a real input field.

Note that this styling may not look entirely faithful to native control styling on all browsers and platforms.

Default Value: true

inputNode - Node

Reference to the token input node. This is the visible input node the user can type in to add tokens.

listNode - Node

Reference to the token list node.

removeButton - Boolean

If true, each token will have a remove button (in the form of a small "x") which, when clicked, will remove the token.
Default Value: true for mobile devices, false elsewhere.

tokenizeOnBlur - Boolean

If true, any text the user has entered in the token input field will be tokenized when the input field loses focus.
Default Value: true

tokenizeOnEnter - Boolean

If true, any text the user has entered in the token input field will be tokenized when the user presses the enter key while the input field has focus.
Default Value: true

tokens - Array

Current tokens.
Default Value: []
Copyright © 2010 Yahoo! Inc. All rights reserved.