API Docs for: 1.0.0
Show:

eZ.SelectionFilterView Class

A view allowing to select one or several items amongst a list and to filter the list by typing some text in an input field. It is based on YUI AutoCompleteBase component.

This view is meant to progressively enhance an existing markup:

<div class="container">
   <input type="text">
   <ul></ul>
</div>

Then, you can instantiate the view with:

new Y.eZ.SelectionFilterView({
    container: '.container',
    inputNode: '.container input',
    listNode: '.container ul',
    source: ['Iron Man', 'Hulk', 'Thor', 'Black Widow']
});

Constructor

eZ.SelectionFilterView

()

Methods

_afterSourceTypeChange

(
  • e
)
protected
Updates the current source based on the new sourceType to ensure that the two attributes don't get out of sync when they're changed separately.

Parameters:

_afterValueChange

(
  • e
)
protected
Handles change events for the value attribute.

Parameters:

_beforeCreateObjectSource

(
  • source
)
protected
Runs before AutoCompleteBase's _createObjectSource() method and augments it to support additional object-based source types.

Parameters:

  • source String

_bindUIACBase

() protected
Attaches event listeners and behaviors.

_createArraySource

(
  • source
)
Object protected
Creates a DataSource-like object that simply returns the specified array as a response. See the source attribute for more details.

Parameters:

  • source Array

Returns:

Object: DataSource-like object.

_createFunctionSource

(
  • source
)
Object protected
Creates a DataSource-like object that passes the query to a custom-defined function, which is expected to call the provided callback with an array of results. See the source attribute for more details.

Parameters:

  • source Function
    Function that accepts a query and a callback as parameters, and calls the callback with an array of results.

Returns:

Object: DataSource-like object.

_createIOSource

(
  • source
)
Object protected
Creates a DataSource-like object that uses Y.io as a source. See the source attribute for more details.

Parameters:

  • source String
    URL.

Returns:

Object: DataSource-like object.

_createJSONPSource

(
  • source
)
Object protected
Creates a DataSource-like object that uses the specified JSONPRequest instance as a source. See the source attribute for more details.

Parameters:

  • source JSONPRequest | String
    URL string or JSONPRequest instance.

Returns:

Object: DataSource-like object.

_createObjectSource

(
  • source
)
Object protected
Creates a DataSource-like object that looks up queries as properties on the specified object, and returns the found value (if any) as a response. See the source attribute for more details.

Parameters:

  • source Object

Returns:

Object: DataSource-like object.

_createSelectSource

(
  • source
)
Object protected
Creates a DataSource-like object that uses the specified <select> node as a source.

Parameters:

  • source Node
    YUI Node instance wrapping a <select> node.

Returns:

Object: DataSource-like object.

_createStringSource

(
  • source
)
Object protected
Creates a DataSource-like object that calls the specified URL or executes the specified YQL query for results. If the string starts with "select ", "use ", or "set " (case-insensitive), it's assumed to be a YQL query; otherwise, it's assumed to be a URL (which may be absolute or relative). URLs containing a "{callback}" placeholder are assumed to be JSONP URLs; all others will use XHR. See the source attribute for more details.

Parameters:

  • source String
    URL or YQL query.

Returns:

Object: DataSource-like object.

_createYQLSource

(
  • source
)
Object protected
Creates a DataSource-like object that uses the specified YQL query string to create a YQL-based source. See the source attribute for details. If no resultListLocator is defined, this method will set a best-guess locator that might work for many typical YQL queries.

Parameters:

  • source String
    YQL query.

Returns:

Object: DataSource-like object.

_defaultYQLLocator

(
  • response
)
Array protected
Default resultListLocator used when a string-based YQL source is set and the implementer hasn't already specified one.

Parameters:

  • response Object
    YQL response object.

Returns:

Array:

_defClearFn

() protected
Default clear event handler. Sets the results attribute to an empty array and query to null.

_defQueryFn

(
  • e
)
protected
Default query event handler. Sets the query attribute and sends a request to the source if one is configured.

Parameters:

_defResultsFn

(
  • e
)
protected
Default results event handler. Sets the results attribute to the latest results.

Parameters:

_functionValidator

(
  • value
)
protected
Returns true if _value_ is either a function or null.

Parameters:

  • value Function | Null
    Value to validate.

_getListNode

(
  • value
)
Node protected

Returns the list item node based on a string value

Parameters:

  • value String

Returns:

Node:

_getObjectValue

(
  • obj
  • path
)
Any protected
Faster and safer alternative to Y.Object.getValue(). Doesn't bother casting the path to an array (since we already know it's an array) and doesn't throw an error if a value in the middle of the object hierarchy is neither undefined nor an object.

Parameters:

  • obj Object
  • path Array

Returns:

Any: Located value, or undefined if the value was not found at the specified path.

_getTargetAttributes

(
  • the
)
Object

Returns the attributes of the selected element. The attributes are the data attribute of the selected element.

Parameters:

  • the Node

    selected node

Returns:

Object:

a hash with the attributes values.

_getXHRUrl

(
  • url
  • request
)
String protected
Returns a formatted XHR URL based on the specified base _url_, _query_, and the current _requestTemplate_ if any.

Parameters:

  • url String
    Base URL.
  • request Object
    Request object containing query and request properties.

Returns:

String: Formatted URL.

_isItemSelected

(
  • item
)
protected

Checks whether the item is selected

Parameters:

_itemMouseOout

(
  • e
)
protected

Event handler for the mouseout event on the list items.

Parameters:

  • e Object

    event facade

_itemMouseOver

(
  • e
)
protected

Event handler for the mouseover event on the list items.

Parameters:

  • e Object

    event facade

_jsonpFormatter

(
  • url
  • proxy
  • query
)
String protected
URL formatter passed to JSONPRequest instances.

Parameters:

  • url String
  • proxy String
  • query String

Returns:

String: Formatted URL

_onInputBlur

(
  • e
)
protected
Handles blur events on the input node.

Parameters:

_onInputValueChange

(
  • e
)
protected
Handles valueChange events on the input node and fires a query event when the input value meets the configured criteria.

Parameters:

_onResponse

(
  • e
)
protected
Handles source responses and fires the results event.

Parameters:

_parseResponse

(
  • query
  • response
  • data
)
protected
Parses result responses, performs filtering and highlighting, and fires the results event.

Parameters:

  • query String
    Query that generated these results.
  • response Object
    Response containing results.
  • data Object
    Raw response data.

_parseValue

(
  • value
)
String | Null protected
Returns the query portion of the specified input value, or null if there is no suitable query within the input value. If a query delimiter is defined, the query will be the last delimited part of of the string.

Parameters:

  • value String
    Input value from which to extract the query.

Returns:

String | Null: query

_select

(
  • e
)
protected

Event handler for the tap event happening on the item elements. It selects or unselects the items depending on the current state.

Parameters:

  • e Object

    event facade

_setEnableCache

(
  • value
)
protected

Inherited from AutoCompleteBase: autocomplete/js/autocomplete-base.js:559

Available since 3.5.0

Setter for the enableCache attribute.

Parameters:

  • value Boolean

_setLocator

(
  • locator
)
Function | Null protected
Setter for locator attributes.

Parameters:

  • locator Function | String | Null

Returns:

Function | Null:

_setRequestTemplate

(
  • template
)
Function | Null protected
Setter for the requestTemplate attribute.

Parameters:

  • template Function | String | Null

Returns:

Function | Null:

_setResultFilters

(
  • filters
)
Function protected
Setter for the resultFilters attribute.

Parameters:

  • filters Array | Function | String | Null
    null, a filter function, an array of filter functions, or a string or array of strings representing the names of methods on Y.AutoCompleteFilters.

Returns:

Function: Array of filter functions (empty if filters is null).

_setResultHighlighter

(
  • highlighter
)
Function | Null protected
Setter for the resultHighlighter attribute.

Parameters:

  • highlighter Function | String | Null
    null, a highlighter function, or a string representing the name of a method on Y.AutoCompleteHighlighters.

Returns:

Function | Null:

_setSource

(
  • source
)
DataSource | Object protected
Setter for the source attribute. Returns a DataSource or a DataSource-like object depending on the type of _source_ and/or the value of the sourceType attribute.

Parameters:

  • source Any
    AutoComplete source. See the source attribute for details.

Returns:

DataSource | Object:

_sourceSuccess

(
  • data
  • request
)
protected
Shared success callback for non-DataSource sources.

Parameters:

  • data Any
    Response data.
  • request Object
    Request object.

_syncBrowserAutocomplete

() protected
Synchronizes the UI state of the allowBrowserAutocomplete attribute.

_syncUIACBase

() protected
Synchronizes the UI state of the inputNode.

_uiActiveItem

(
  • item
)
protected

Sets the item as active by adding the active class

Parameters:

_uiActiveItem

(
  • item
)
protected

Sets the item as inactive by adding the active class

Parameters:

_uiAddItemNode

(
  • content
  • attrs
)
protected

Adds an item in the list of possible choice.

Parameters:

  • content String

    the string to display

  • attrs String

    hash to create data attributes

_uiSelectItem

(
  • item
)
protected

Selects the item in the DOM by adding the selected class

Parameters:

_uiSelectItem

(
  • item
)
protected

Unselects the item in the DOM by removing the selected class

Parameters:

_uiSetDefaultList

() protected

Adds the unfiltered list of items to the list node

_uiSetList

(
  • list
)
protected

Adds some items in the list node based on the list parameter. Each element of the list should be an object with a display and a text entries

Parameters:

  • list Array

_updateValue

(
  • newVal
)
protected
Updates the query portion of the value attribute. If a query delimiter is defined, the last delimited portion of the input value will be replaced with the specified _value_.

Parameters:

  • newVal String
    New value.

clearCache

() chainable

Inherited from AutoCompleteBase: autocomplete/js/autocomplete-base.js:177

Available since 3.5.0

Clears the result cache.

focus

()

Focuses the filter input

initializer

()

Initializes the selection filter view. It adds the necessary classes and sets up the event handlers

render

() eZ.SelectionFilterView

Renders the view

Returns:

eZ.SelectionFilterView:

the view it self

resetFilter

()

Resets the filter input and the item list

sendRequest

(
  • [query]
  • [requestTemplate]
)
chainable
Sends a request to the configured source. If no source is configured, this method won't do anything. Usually there's no reason to call this method manually; it will be called automatically when user input causes a query event to be fired. The only time you'll need to call this method manually is if you want to force a request to be sent when no user input has occurred.

Parameters:

  • [query] String optional
    Query to send. If specified, the query attribute will be set to this query. If not specified, the current value of the query attribute will be used.
  • [requestTemplate] Function optional
    Request template function. If not specified, the current value of the requestTemplate attribute will be used.

unselect

(
  • value
  • [selectedNode]
)

Unselects an item based on its value

Parameters:

  • value String
  • [selectedNode] Node optional

    optional selected node for internal use only.

Properties

_YQL_SOURCE_REGEX

RegExp protected
Regular expression used to determine whether a String source is a YQL query.

Attributes

allowBrowserAutocomplete

Boolean
Whether or not to enable the browser's built-in autocomplete functionality for input fields.

Default: false

allowTrailingDelimiter

Boolean
When a queryDelimiter is set, trailing delimiters will automatically be stripped from the input value by default when the input node loses focus. Set this to true to allow trailing delimiters.

Default: false

enableCache

Boolean

Inherited from AutoCompleteBase: autocomplete/js/autocomplete-base.js:997

Available since 3.5.0

Whether or not to enable in-memory caching in result sources that support it.

Default: true

filter

Whether to allow filtering

Default: true

inputNode

Node | HTMLElement | String
Node to monitor for changes, which will generate query events when appropriate. May be either an <input> or a <textarea>.

isMultiple

Whether it should be possible to select several items

Default: false

listNode

required

The node where the available items should be added

maxResults

Number
Maximum number of results to return. A value of 0 or less will allow an unlimited number of results.

Default: 0

minQueryLength

Number
Minimum number of characters that must be entered before a query event will be fired. A value of 0 allows empty queries; a negative value will effectively disable all query events.

Default: 1

query

String | Null readonly
Current query, or null if there is no current query. The query might not be the same as the current value of the input node, both for timing reasons (due to queryDelay) and because when one or more queryDelimiter separators are in use, only the last portion of the delimited input string will be used as the query value.

Default: null

queryDelay

Number
Number of milliseconds to delay after input before triggering a query event. If new input occurs before this delay is over, the previous input event will be ignored and a new delay will begin. This can be useful both to throttle queries to a remote data source and to avoid distracting the user by showing them less relevant results before they've paused their typing.

Default: 100

queryDelimiter

String | Null
Query delimiter string. When a delimiter is configured, the input value will be split on the delimiter, and only the last portion will be used in autocomplete queries and updated when the query attribute is modified.

Default: null

requestTemplate

Function | String | Null
Source request template. This can be a function that accepts a query as a parameter and returns a request string, or it can be a string containing the placeholder "{query}", which will be replaced with the actual URI-encoded query. In either case, the resulting string will be appended to the request URL when the source attribute is set to a remote DataSource, JSONP URL, or XHR URL (it will not be appended to YQL URLs). While requestTemplate may be set to either a function or a string, it will always be returned as a function that accepts a query argument and returns a string.

Default: null

resultAttributesFormatter

Function

A function to extract the attributes to add for each element in the source array. The default implementation returns a hash containing a text entry holding the toString return value of the source element.

resultFilters

Array
Array of local result filter functions. If provided, each filter will be called with two arguments when results are received: the query and an array of result objects. See the documentation for the results event for a list of the properties available on each result object. Each filter is expected to return a filtered or modified version of the results array, which will then be passed on to subsequent filters, then the resultHighlighter function (if set), then the resultFormatter function (if set), and finally to subscribers to the results event. If no source is set, result filters will not be called. Prepackaged result filters provided by the autocomplete-filters and autocomplete-filters-accentfold modules can be used by specifying the filter name as a string, such as 'phraseMatch' (assuming the necessary filters module is loaded).

Default: []

resultFormatter

Function | Null
Function which will be used to format results. If provided, this function will be called with two arguments after results have been received and filtered: the query and an array of result objects. The formatter is expected to return an array of HTML strings or Node instances containing the desired HTML for each result. See the documentation for the results event for a list of the properties available on each result object. If no source is set, the formatter will not be called.

resultHighlighter

Function | Null
Function which will be used to highlight results. If provided, this function will be called with two arguments after results have been received and filtered: the query and an array of filtered result objects. The highlighter is expected to return an array of highlighted result text in the form of HTML strings. See the documentation for the results event for a list of the properties available on each result object. If no source is set, the highlighter will not be called.

resultListLocator

Function | String | Null
Locator that should be used to extract an array of results from a non-array response. By default, no locator is applied, and all responses are assumed to be arrays by default. If all responses are already arrays, you don't need to define a locator. The locator may be either a function (which will receive the raw response as an argument and must return an array) or a string representing an object path, such as "foo.bar.baz" (which would return the value of result.foo.bar.baz if the response is an object). While resultListLocator may be set to either a function or a string, it will always be returned as a function that accepts a response argument and returns an array.

results

Array readonly
Current results, or an empty array if there are no results.

Default: []

resultTextLocator

Function | String | Null
Locator that should be used to extract a plain text string from a non-string result item. The resulting text value will typically be the value that ends up being inserted into an input field or textarea when the user of an autocomplete implementation selects a result. By default, no locator is applied, and all results are assumed to be plain text strings. If all results are already plain text strings, you don't need to define a locator. The locator may be either a function (which will receive the raw result as an argument and must return a string) or a string representing an object path, such as "foo.bar.baz" (which would return the value of result.foo.bar.baz if the result is an object). While resultTextLocator may be set to either a function or a string, it will always be returned as a function that accepts a result argument and returns a string.

selected

The selected values

Default: []

source

required

The source for the list of available items. Overrides the source attribute from AutoCompleteBase to only accepts array as source.

sourceType

String
May be used to force a specific source type, overriding the automatic source type detection. It should almost never be necessary to do this, but as they taught us in the Boy Scouts, one should always be prepared, so it's here if you need it. Be warned that if you set this attribute and something breaks, it's your own fault. Supported sourceType values are: 'array', 'datasource', 'function', and 'object'. If the autocomplete-sources module is loaded, the following additional source types are supported: 'io', 'jsonp', 'select', 'string', 'yql'

tokenInput

Plugin.TokenInput readonly
If the inputNode specified at instantiation time has a node-tokeninput plugin attached to it, this attribute will be a reference to the Y.Plugin.TokenInput instance.

value

String
Current value of the input node.

Default: ''

yqlEnv

String
YQL environment file URL to load when the source is set to a YQL query. Set this to null to use the default Open Data Tables environment file (http://datatables.org/alltables.env).

Default: null

yqlProtocol

String
URL protocol to use when the source is set to a YQL query.

Default: 'http'

Events

clear

Fires after the query has been completely cleared or no longer meets the minimum query length requirement.

Event Payload:

  • prevVal String
    Value of the query before it was cleared.
  • src String
    Source of the event.

query

Fires when the contents of the input field have changed and the input value meets the criteria necessary to generate an autocomplete query.

Event Payload:

  • inputValue String
    Full contents of the text input field or textarea that generated the query.
  • query String
    AutoComplete query. This is the string that will be used to request completion results. It may or may not be the same as inputValue.
  • src String
    Source of the event.

results

Fires after query results are received from the source. If no source has been set, this event will not fire.

Event Payload:

  • data Array | Object
    Raw, unfiltered result data (if available).
  • query String
    Query that generated these results.
  • results Object
    Array of filtered, formatted, and highlighted results. Each item in the array is an object with the following properties:
    • display Node | HTMLElement | String

      Formatted result HTML suitable for display to the user. If no custom formatter is set, this will be an HTML-escaped version of the string in the text property.

    • [highlighted] String optional

      Highlighted (but not formatted) result text. This property will only be set if a highlighter is in use.

    • raw Any

      Raw, unformatted result in whatever form it was provided by the source.

    • text String

      Plain text version of the result, suitable for being inserted into the value of a text input field or textarea when the result is selected by a user. This value is not HTML-escaped and should not be inserted into the page using innerHTML or Node#setContent().

select

Fired when a user action selects an item

Event Payload:

  • text String

    the value which was selected

  • elementNode Node

    the node containing the value

  • attributes Object

    the data attributes on the elementNode. Those attributes are ones returned by the function stored in the resultAttributesFormatter attribute.

unselect

Fired when a user action unselects an item

Event Payload:

  • text String

    the value which was unselected