Alloy UI

aui-live-search  1.0.1

 
Filters

Class LiveSearch - extends Base

A base class for LiveSearch, providing:
  • Real-time filtering for DOM elements based on a input query
Quick Example:
var instance = new A.LiveSearch({
input: '#input',
nodes: '#search .entry'
});
Check the list of Configuration Attributes available for LiveSearch.

Constructor

LiveSearch ( config )
Parameters:
config <Object> Object literal specifying widget configuration properties.

Properties

LiveSearch.ATTRS - static Object

Static property used to define the default attribute configuration for the LiveSearch.

LiveSearch.NAME - static String

Static property provides a string to identify the class.

normalizedQuery - protected String

Stores the normalized query value given from _normalizeQuery.

query - protected String

Stores the query value.

timer - protected Object

Handles the later Object.

Properties inherited from Attribute:

Properties inherited from Base:

Configuration Attributes

data - function

Function to extract the content from the node for the indexing. The default uses the node.html(). In case if you need to index the id of the nodes, here goes one example:

Example indexing the id of the node instead of the HTML:
function(node) {
return node.attr('id');
}
Default Value: function(node) { return node.html(); }

delay - Number

Number of milliseconds the filter will be applied to the node list after the user stop typing.
Default Value: 250

hide - function

Function to be executed to hide the node when the data of that node not matches with the filter.
Default Value: function(node) { return node.hide(); }

index - Array

Index for the nodes content.
Default Value: []

input - Node | String

The value of this input node is used to filter the results.

matchRegex - RegExp

The input value need to matches with this RegExp to be accept as a filter (i.e., in order to accept only digits you could use /\d+/g).
Default Value: (.)*

nodes - Node | NodeList

Nodes to be indexed for the filtering.

show - function

Function to be executed to show the node when the data of that node matches with the filter.
Default Value: function(node) { return node.show(); }

Configuration attributes inherited from Base:

Methods

_inputKeyUp

protected void _inputKeyUp ( event )
Fires the keyup event on input.
Parameters:
event <EventFacade> keyup event facade

_normalizeQuery

protected String _normalizeQuery ( query )
Normalize the input query. With trim, matchRegex and replace '*' to '' (on a regex empty match with everything like *).
Parameters:
query <String> Query to filter results

_setNodes

protected Node | NodeList | String _setNodes ( v )
Setter for nodes.
Parameters:
v <Node | NodeList | String>

bindUI

protected void bindUI ( )
Bind the events on the LiveSearch UI. Lifecycle.

destroy

protected void destroy ( )
Descructor lifecycle implementation for the LiveSearch class. Purges events attached to the node (and all child nodes).

filter

Array filter ( query )
Filter the nodes based on the input value.
Parameters:
query <String> Query to filter results
Returns: Array
Matched results.

initializer

protected void initializer ( )
Construction logic executed during LiveSearch instantiation. Lifecycle.

refreshIndex

void refreshIndex ( )
Refreshes the index.

search

protected void search ( event )
Fires the search event.
Parameters:
event <EventFacade> search event facade

Events

dataChange

dataChange ( event )
Fires when the value for the configuration attribute 'data' 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

delayChange

delayChange ( event )
Fires when the value for the configuration attribute 'delay' 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

hideChange

hideChange ( event )
Fires when the value for the configuration attribute 'hide' 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

indexChange

indexChange ( event )
Fires when the value for the configuration attribute 'index' 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

inputChange

inputChange ( event )
Fires when the value for the configuration attribute 'input' 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

matchRegexChange

matchRegexChange ( event )
Fires when the value for the configuration attribute 'matchRegex' 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

nodesChange

nodesChange ( event )
Fires when the value for the configuration attribute 'nodes' 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

showChange

showChange ( event )
Fires when the value for the configuration attribute 'show' 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

Events inherited from Base: