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.