Page MenuHomeGitPull.it
Diviner Javelin Docs JX.Typeahead

class JX.Typeahead
Javelin Documentation ()

A typeahead is a UI component similar to a text input, except that it suggests some set of results (like friends' names, common searches, or repository paths) as the user types them. Familiar examples of this UI include Google Suggest, the Facebook search box, and OS X's Spotlight feature.

To build a JX.Typeahead, you need to do four things:

  1. Construct it, passing some DOM nodes for it to attach to. See the constructor for more information.
  2. Attach a datasource by calling setDatasource() with a valid datasource, often a JX.TypeaheadPreloadedSource.
  3. Configure any special options that you want.
  4. Call start().

If you do this correctly, a dropdown menu should appear under the input as the user types, suggesting matching results.

Tasks

Builtin Events

  • static listen(type, callback) — Listen for events emitted by this object instance. You can also use the static flavor of this method to listen to events emitted by any instance of this object.

Building a Typeahead

  • construct(hardpoint, control) — Construct a new Typeahead on some "hardpoint". At a minimum, the hardpoint should be a ##<div>## with "position: relative;" wrapped around a text ##<input>##. The typeahead's dropdown suggestions will be appended to the hardpoint in the DOM. Basically, this is the bare minimum requirement:

Configuring a Datasource

No methods for this task.

Configuring Options

  • updatePlaceholder() — Boolean. If true (default), the user is permitted to submit the typeahead with a custom or empty selection. This is a good behavior if the typeahead is attached to something like a search input, where the user might type a freeform query or select from a list of suggestions. However, sometimes you require a specific input (e.g., choosing which user owns something), in which case you can prevent null selections.

Activating a Typeahead

No methods for this task.

Controlling Typeaheads from Javascript

No methods for this task.

Internal Methods

No methods for this task.

Methods

static listen(type, callback)
Inherited

JX.Base

Listen for events emitted by this object instance. You can also use the static flavor of this method to listen to events emitted by any instance of this object.

See also JX.Stratcom.listen().

Parameters
type
callback

construct(hardpoint, control)

Construct a new Typeahead on some "hardpoint". At a minimum, the hardpoint should be a <div> with "position: relative;" wrapped around a text

<input>##. The typeahead's dropdown suggestions will be appended to the

hardpoint in the DOM. Basically, this is the bare minimum requirement:

<div style="position: relative;">
  <input type="text" />
</div>

Then get a reference to the <div> and pass it as 'hardpoint', and pass the <input> as 'control'. This will enhance your boring old

<input />## with amazing typeahead powers.

On the Facebook/Tools stack, <javelin:typeahead-template /> can build this for you.

Parameters
Nodehardpoint"Hardpoint", basically an anchorpoint in the document which the typeahead can append its suggestion menu to.
Node?controlActual ##<input />## to use; if not provided, the typeahead will just look for a (solitary) input inside the hardpoint.

updatePlaceholder()

Boolean. If true (default), the user is permitted to submit the typeahead with a custom or empty selection. This is a good behavior if the typeahead is attached to something like a search input, where the user might type a freeform query or select from a list of suggestions. However, sometimes you require a specific input (e.g., choosing which user owns something), in which case you can prevent null selections.

Defined
lib/control/typeahead/Typeahead.js:39
Extends
JX.Base
Public contents are in Creative Commons Attribution-ShareAlike 4.0 (CC-BY-SA) or GNU Free Documentation License (at your option) unless otherwise noted. · Contact / Register