Installation

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

Basic usage

//如果你不使用ajax，你需要在数组中放入以组需要自动完成的选项对象
//例如：
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);