Full-featured Autocomplete Library For jQuery – Typeahead.js

Simply one other jQuery typeahead plugin which supplies totally customizable and AJAX-enabled autocomplete functionalities on enter fields with versatile APIs.

Key options:

• Cross browser.
• Tons of customization choices and callback capabilities.
• Cross-domain JSONP supported.
• Loading animations.
• Search string highlighting.
• Customized template.
• Keyboard interactions.
• End result group with dropdown filter assist.
• ‘localStorage’ or ‘sessionStorage’ caching assist.
• Sortable outcomes.

Set up it through package deal managers:

# NPM
$ npm set up jquery-typeahead

# Bower
$ bower set up jquery-typeahead

Fundamental utilization:

1. First you might want to load the next JavaScript and CSS information in your html doc.

<hyperlink rel="stylesheet" href="jquery.typeahead.css">
<script src="jquery.min.js"></script>
<script src="jquery.typeahead.js"></script>

2. Then create an enter area:

<enter class="js-typeahead"
       title="q"
       sort="search"
       autofocus
       autocomplete="off">

3. Lastly, name the principle operate on the enter area and specify the info supply you need to fetch.

$('.js-typeahead').typeahead({
  supply: {
    // native knowledge
    groupName: {
      knowledge: [ {...}, {...} ]
    }
  }
});

// or
$('.js-typeahead').typeahead({
  supply: {
    // distant knowledge
    groupName: {
      ajax: {
        url: "..."
      }
    }
  }
});

4. Config the typeahead/autocomplete plugin with the next choices.

// *RECOMMENDED*, jQuery selector to achieve Typeahead's enter for initialization
enter: null,            

// Accepts 0 to look on focus, minimal character size to carry out a search
minLength: 2,          

// False as "Infinity" is not going to put character size restriction for looking out outcomes 
maxLength: false,       

// Accepts 0 / false as "Infinity" which means all the outcomes can be displayed
maxItem: 8,             

// When true, Typeahead will get a brand new dataset from the supply choice on each key press
dynamic: false,         

// delay in ms when dynamic choice is about to true
delay: 300,             

// "asc" or "desc" to kind outcomes
order: null,            

// Set to true to match objects ranging from their first character
offset: false,          

// Added assist for extreme "area" characters
trace: false,            

// Will enable to sort accent and provides letter equal outcomes, can also outline a customized substitute object
accent: false,          

// Added "any" to focus on any phrase within the template, by default true will solely spotlight show keys
spotlight: true,        

// Improved function, Boolean,string,object(key, template (string, operate))
group: false,           

// New function, order teams "asc", "desc", Array, Perform
groupOrder: null,       

// Most variety of end result per Group
maxItemPerGroup: null,  

// Take group choices string and create a dropdown filter
dropdownFilter: false,  

// Filter the typeahead outcomes based mostly on dynamic worth, Ex: Gamers based mostly on TeamID
dynamicFilter: null,    

// Add a backdrop behind Typeahead outcomes
backdrop: false,        

// Show the backdrop choice because the Typeahead enter is :centered
backdropOnFocus: false, 

// Improved choice, true OR 'localStorage' OR 'sessionStorage'
cache: false,           

// Cache time to stay in ms
ttl: 3600000,           

// Requires LZString library
compression: false,     

// Show search outcomes on enter focus
searchOnFocus: false,   

// Blur Typeahead when Tab secret's pressed, if false Tab will go although search outcomes
blurOnTab: true,        

// Listing the outcomes inside any container string or jQuery object
resultContainer: null,  

// Forces the supply to be generated on web page load even when the enter just isn't centered!
generateOnLoad: null,   

// The submit operate solely will get referred to as if an merchandise is chosen
mustSelectItem: false,  

// String or Perform to format the url for right-click & open in new tab on hyperlink outcomes
href: null,             

// Permits search in a number of merchandise keys ["display1", "display2"]
show: ["display"],   

// Show template of every of the end result record
template: null,         

// Set the enter worth template when an merchandise is clicked
templateValue: null,    

// Set a customized template for the teams
groupTemplate: null,    

// Compile show keys, allows a number of key search from the template string
correlativeTemplate: false, 

// Show an empty template if no end result
emptyTemplate: false,   

// // If textual content is detected within the enter, a cancel button can be obtainable to reset the enter (urgent ESC additionally cancels)
cancelButton: true,     

// Show a loading animation when typeahead is doing request / looking for outcomes
loadingAnimation: true, 

// Set to false or operate to bypass Typeahead filtering. WARNING: accent, correlativeTemplate, offset & matcher is not going to be interpreted
filter: true,           

// Add an additional filtering operate after the typeahead capabilities
matcher: null,          

// Supply of information for Typeahead to filter
supply: null,           

// CSS selectors
selector: {
  container: "typeahead__container",
  end result: "typeahead__result",
  record: "typeahead__list",
  group: "typeahead__group",
  merchandise: "typeahead__item",
  empty: "typeahead__empty",
  show: "typeahead__display",
  question: "typeahead__query",
  filter: "typeahead__filter",
  filterButton: "typeahead__filter-button",
  dropdown: "typeahead__dropdown",
  dropdownItem: "typeahead__dropdown-item",
  button: "typeahead__button",
  backdrop: "typeahead__backdrop",
  trace: "typeahead__hint",
  cancelButton: "typeahead__cancel-button"
},

// Show debug data (RECOMMENDED for dev surroundings)
debug: false                    

5. Callback capabilities.

callback: {

  // When Typeahead is first initialized (occurs solely as soon as)
  onInit: null,               

  // When the Typeahead preliminary preparation is accomplished
  onReady: null,              

  // Referred to as when the structure is proven
  onShowLayout: null,         

  // Referred to as when the structure is hidden
  onHideLayout: null,         

  // When knowledge is being fetched & analyzed to provide search outcomes
  onSearch: null,             

  // When the end result container is displayed
  onResult: null,             

  // When the end result HTML is construct, modify it earlier than it get confirmed
  onLayoutBuiltBefore: null,  

  // Modify the dom proper after the outcomes will get inserted within the end result container
  onLayoutBuiltAfter: null,   

  // When a secret's pressed to navigate the outcomes, earlier than the navigation occurs
  onNavigateBefore: null,     

  // When a secret's pressed to navigate the outcomes
  onNavigateAfter: null,      

  // When the mouse enter an merchandise within the end result record
  onMouseEnter: null,         

  // When the mouse leaves an merchandise within the end result record
  onMouseLeave: null,         

  // Chance to e.preventDefault() to forestall the Typeahead behaviors
  onClickBefore: null,        

  // Occurs after the default clicked behaviors has been executed
  onClickAfter: null,         

  // When the dropdownFilter is modified, set off this callback
  onDropdownFilter: null,     

  // Will get referred to as when the Ajax request(s) are despatched
  onSendRequest: null,        

  // Will get referred to as when the Ajax request(s) are all acquired
  onReceiveRequest: null,     

  // Carry out operation on the supply knowledge earlier than it will get in Typeahead knowledge
  onPopulateSource: null,     

  // Carry out operation on the supply knowledge earlier than it will get in Typeahead cache
  onCacheSave: null,          

  // When Typeahead kind is submitted
  onSubmit: null,             

  // Triggered if the typeahead had textual content inside and is cleared
  onCancel: null              
  
}

Changelog:

v2.11.2 (2022-09-17)

v2.11.1 (2020-05-19)

v2.11.0 (2019-11-01)

• multi supply async outcomes

v2.10.7 (2019-10-20)

• Repair enter on Chrome unable to position the cursor
• Repair sorting when show key worth is null
• Repair first verify that we discover an enter earlier than accessing discovered parts

2018-07-31

This superior jQuery plugin is developed by running-coder. For extra Superior Usages, please verify the demo web page or go to the official web site.