Skip to content

gravitydepartment/typeahead

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 

Gravity Department

GravDept Typeahead

Fast, lightweight typeahead to enhance text inputs.

Demo

[todo]

Features

  • 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.

Dependencies

  • jQuery

Usage

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;
};

searchTypeahead.init({
    elements: {
        button:   'search-button',
        form:     'search-form',
        input:    'search-input',
        response: 'search-response'
    },
    url: 'http://example.com/ajax/typeahead'
});

Documentation

[todo]

Options

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
}

About

Fast, lightweight typeahead to enhance text inputs.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published