Advanced Autocomplete
jQuery plugin

Installation

• Add jQuery
• Add void_autocomplete.js
• Add void_autocomplete.css

Basic usage

// If you are not using the ajax option
// you'll need to pass the list of items
// as an array of objects

var celestial_bodies = [
  {title:"Earth", id:"1"},
  {title:"Moon", id:"2"},
  {title:"Sun", id:"3"}
];

var myAutocomplete = $("input").void_autocomplete({
  list: celestial_bodies,
  onItemSelect: function(){console.log(item);}
});

Using it with an ajax call

When the input changes, a call is made, retrieving the results for the user input.

If "list.php/" is provided, "list.php/userInput" will be called, and so on.

var ajax_url = "json/list.json";

var myAutocomplete = $("input").void_autocomplete({
  ajax: ajax_url,
  onItemSelect: autocompleteCallback,
  maxResults: 10
});

// This function is called whenever
// an option is selected in the autocomplete

function autocompleteCallback(selected){
    console.log(selected);
}

All options

• min: Minimum amount of characters in the input before open the autocomplete. Default: 1
• selections: 0 to allow any number of selections. 1 for a single selection. Default: 0
• openUp: If true, opens the list up, over the input. Otherwise it opens down. Default: false
• list: Array of objects to list as options. Default: empty
• caseSensitive: If the search will be case sensitive. Default: false
• maxResults: Maxium amount of items to display as an autocomplete suggestion. Default: 10
• sortKey: The key that defines in which order the list items will be displayed. Default: false (sorts by coincidence)
• ajax: Minimum amount of characters in the input before open the autocomplete. Default: false
• onItemSelect: Callback function, triggered whenever the user makes a selection. Default: none

// Default setup

var myAutocomplete = $("input").void_autocomplete({
  min: 1,
  selections: 0,
  openUp: false,
  list: [],
  caseSensitive: false,
  maxResults: 10,
  sortKey: false,
  ajax: false,
  onItemSelect: function(){}
});

Methods

• forceItem: Inserts a new list item and triggers the callback. It may be handy specially when selections equals 1.

• recoverItem: Unselects a previously selected item and triggers the callback. It may be handy specially when selections equals 1.

var myAutocomplete = $("input").void_autocomplete({
  selections: 1,
  list: celestial_bodies
});

var pluto = {
  title:"Pluto",
  id:"11"
};

myAutocomplete.forceItem(pluto);