# Mojo.Widget.FilterField

## Namespace Detail

### Overview

The FilterField widget has an input field displayed at the top of the screen that displays the result of just typing to the screen when no other input field is focused. The field is hidden when empty, its initial state, but it is given focus in the scene so that any typing is captured in the field.

As soon as the first character is entered, the framework displays the field and calls the specified filterFunction. The FilterField automatically delays events so that a search is not triggered as the result of every query.

### Declaration

>     <div x-mojo-element="FilterField" id="filterFieldId" class="filterFieldClass"
>       name="filterFieldName" ></div>

Properties | Required | Value | Description
--- | --- | --- | ---
x-mojo-element | Required | FilterField | Declares the widget as type 'FilterField'.
id | Required | Any String | Identifies the widget element for use when instantiating or rendering.

### Events

>     Mojo.Event.listen(this.controller.get("filterFieldId"), Mojo.Event.filter, this.handleUpdate);

Event Type | Value | Event Handling
--- | --- | ---
Mojo.Event.filter | filterString: value in the filter field. | Sent after the specified delayed passes.
Mojo.Event.filterImmediate | filterString: value in the filter field. | Sent on every key press.

### Instantiation

>     this.controller.setupWidget('filterField',
>       this.attributes = {
>           delay: 5000,
>           filterFieldHeight: 100
>       },
>       this.model = {
>           disabled: false
>       }
>     );

### Attribute Properties

Attribute Property | Type | Required | Default | Description
--- | --- | --- | --- | ---
delay | Integer | Optional | 300 (in ms) | How long to wait between key strokes for a filter event; helps to queue them up so not constantly searching.
disabledProperty | String | Optional | "disabled" | Model property name for disabled.

### Model Properties

Model Property | Type | Required | Default | Description
--- | --- | --- | --- | ---
disabled | Boolean | false | "disabled" | If true, the FilterField does not open when keys are typed with no focused element on the screen.

### Methods

To invoke a method on a widget, use the scene controller's `get` method for the desired widget, and append `mojo` followed by the method.

Example:

>     this.controller.get('myWidget').mojo.getValue()

Method | Arguments | Description
--- | --- | ---
close | None | Closes the FilterField.
open | None | Opens the FilterField.
setCount | count(Integer) | Sets the number to be shown in the results bubble in the FilterField.