Class: TypeAheadInput

FormComponents. TypeAheadInput


new TypeAheadInput()

TypeAheadInput Component
A component for building 'type-ahead' or autocomplete functionality.

Properties:
Name Type Argument Description
fieldKey String
label String
placeholder String
helpText String
limit Number

Limit on number of suggested results

resourceAction Object
returnField String <optional>

Field to return from matching objects in source

source Object

Source, either a local array or 'remote'

updateCallback function

A callback called every-time the component updates

Source:
See:
Example
// A local source array could be structured as follows:

dataSource: [
	{ name: 'Alabama',              state : 'AL'},
	{ name: 'Alaska',               state : 'AK'},
	{ name: 'Arizona',              state : 'AZ'},
	{ name: 'Arkansas',             state : 'AR'},
	{ name: 'California',           state : 'CA'},
	{ name: 'Colorado',             state : 'CO'},
	{ name: 'Connecticut',          state : 'CT'},
]

render: function() { return(
	<Br.Form.TypeAheadInput
		source={this.dataSource}
		fields={['name', 'state']}
		returnField='state'
		label='Start Typing...'
		placeholder="USA state search"
	/>
)}

Methods


<private, static> _getDataLabel(element)

Traverses up an element's parents until a data-label is found.
All selectable options will have data-labels, but if a mutator is used,
that data-label might not pass down to a child element. In that case,
we need to climb the tree until we find the data-label we're looking for.

Parameters:
Name Type Description
element DOMNode

The current element we're looking for

Source:
Returns:
Type
String | function

<private, static> _onChange()

On change handler.

Source:

<static> buildFilters(query)

Build a string of query filters.

Parameters:
Name Type Description
query String
Source:
Returns:
Type
Object

<static> buildSelectedBubbles()

Build a set of selected option.label bubbles.

Source:
Returns:
Type
*

<static> buildSelectOptions()

Build a set of selectable buttons based on results from the input field.

Source:
Returns:
Type
*

<static> componentDidMount()

Register an event listener. Called anytime the component mounts.
Generates a unique formKey for the input's form and saves it to state.
Also attached a change listener to the FormStore to get updates when changes are made.

Source:
Returns:
Type
null

<static> componentDidUpdate()

Any time the component updates, if there's a callback provided, fire it.

Source:
Returns:

null


<static> componentWillReceiveProps(nextProps)

Set fieldValue through props based on attached resource.

Parameters:
Name Type Description
nextProps Object
Source:

<static> componentWillUnmount()

Deregister an event listener. Called when the component is unmounted.
Removes the FormStore listener.

Source:
Returns:
Type
null

<static> customHandleChange(event)

Custom change handler for clicks on select options and deselect buttons.

Parameters:
Name Type Description
event
Source:

<static> getInitialState()

Gets the initial state of the component

Source:
Returns:
Type
Object

<static> handleSearchChange(key, value, component)

Handle a change in query input.
Currently will only execute a request once the query is more than two characters.

Parameters:
Name Type Description
key String
value String
component ReactComponent
Source:
Returns:
Type
null

<static> remoteWhere(query)

Query a remote source

Parameters:
Name Type Description
query String
Source:
Returns:
Type
Array

<static> render()

Renders the TypeAheadInput component

Source:
Returns:
Type
JSX

<static> where(array, search)

Searches through the locally provided array.
Uses the Fuse.js library for fuzzy search.
This search can be customized or lodash'ed where other libraries can be used instead.

Parameters:
Name Type Description
array Array
search String
Source:
Returns:
Type
Array