Skip to content
Go to file

Gravity Department

GravDept Typeahead

Fast, lightweight typeahead to enhance text inputs.




  • Efficient — Create multiple typeahead instances from a lean constructor prototype.
  • Customizable — Simple configuration object.
  • Simple rendering — Override the render method to match any data source.
  • Multiple facets — Supports multiple grouped facets in one response.
  • Touch-friendly — Appropriate padding on target sizes.
  • Keyboard-friendly — Supports tab and shift + tab.
  • Two display modes — Block or absolutely positioned results.
  • Click outside the input or response to close typeahead.

Form behavior

  • Submit forms naturally,
  • Or prevent submission for typeahead only use.

Loading behavior

  • Render typeahead instantly on new response,
  • Or show loading indicator for slow-loading requests.

Valid response behavior

  • Click link to follow immediately,
  • Or delegated event for external handling.

Empty response behavior

  • Custom messaging for empty responses,
  • Or simply hide the typeahead.


  • jQuery


Add JS templates to the page:

See: /html/js-templates.html

Add the script to the page:

<script src="path/to/typeahead.js"></script>

Initialize with options:

var searchTypeahead = new Typeahead();

searchTypeahead.render = function (json) {
    // Process your JSON and return HTML
    return html;

    elements: {
        button:   'search-button',
        form:     'search-form',
        input:    'search-input',
        response: 'search-response'
    url: ''




var config = {
    debounceTime: 300, // {number} - Milliseconds to pause before querying
    elements: {
        button:   'search-button',  // {string} - ID of submit buttton
        form:     'search-form',    // {string} - ID of form
        input:    'search-input',   // {string} - ID of text input
        response: 'search-response' // {string} - ID of response element
    paramNameForQuery: null,  // {string}  - Param name for which the query value is passed.
    preventFormSubmit: false, // {boolean} - Prevent form submit if no "action" exists
    queryMinimum:      3,     // {number}  - Minimum characters to start typeahead
    requestData:       {},    // {object}  - URL params to attach to request
    showEmpty:         false, // {boolean} - Show message if response has no results
    showLoading:       false, // {boolean} - Show loading between request and response
    url:               null   // {string}  - URL to query for data


Fast, lightweight typeahead to enhance text inputs.




No releases published


No packages published
You can’t perform that action at this time.