Fast, lightweight typeahead to enhance text inputs.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

GravDept Typeahead

Fast, lightweight typeahead to enhance text inputs.

Gravity Department




  • Efficient — Create multiple typeahead instances from a lean constructor prototype.
  • Customizable — Simple configuration object.
  • Simple — Override the render method to match any data source.
  • Touch-friendly — Appropriate padding on target sizes.
  • Keyboard-friendly — Supports tab and shift + tab.
  • 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.

Response is empty behavior

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

Response has data behavior

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


  • 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