autocomplete.js is a fast and lightweight autocomplete library, without any dependencies.
9 KB
Native JavaScript
No data pre-loaded.
Only AJAX.
Functions overridable
<input data-autocomplete="example.php" />
<script type="text/javascript">
AutoComplete();
</script>
<!-- OR -->
<input id="autocomplete-example" />
<script type="text/javascript">
AutoComplete({
EmptyMessage: "No item found",
}, "#autocomplete-example");
</script>
// JSON array
[
"France",
"United States",
"Germany"
]
// OR JSON object
{
"FR": "France",
"USA": "United States",
"DE": "Germany"
}
Parameter | Definition | Snippets |
---|---|---|
Delay |
Integer value. Must be a positive value. Time between the keyboard event and request sent. |
|
EmptyMessage |
String value. Message displayed when no result found. |
|
Highlight |
Object value. Contains an object with two keys : getRegex and transform. Both are functions. First returns a RegExp to identify part of result which must be highlighted. Second transforms part which must be highlighted. |
|
HttpHeaders |
JSON value. HTTP headers sent in request. |
|
HttpMethod |
String value. Contains HTTP method used to send request. |
|
Limit |
Integer value. When value == 0, no limit applied. When value > 0, display only X items. When value < 0, display only last X items. |
|
MinChars |
Integer value. Send request only when input value has a lenght greather than MinChars parameter. |
|
QueryArg |
String value. Parameter name used to send value into the request. |
|
Url |
String value. Parameter name used to send value into the request. |
|
KeyboardMappings |
Object value. You can easily define new keyboard event to make an autocomplete flexible whick match with your specific usercase. Default value contains three rules to map Enter, Up and Down keys, and all alphanumeric keys. An issue has been open to detail. How to customized KeyboardMappings value |
|
Method | Definition | Snippets |
---|---|---|
_Blur | Method to hide results |
now argument is a boolean value. The default value is false.
|
_Cache | Method to manage cache |
value argument is a string value (value of input autocomplete). If the method returns undefined, a new request is sent.
|
_Close | Method to close result list |
|
_EmptyMessage | Return the message when no result returns |
The value returned is a string.Empty message to display when no results found. |
_Error | Method to manage HTTP request error |
|
_Focus | Manage the display of results (only to display - Hide results, see the method _Blur) |
|
_Highlight | Highlight part of results which match with query search. |
label argument is the item result. Must return a string value. label argument highlighted.
|
_Limit | Returns the maximum number of results |
Must return an integer value.
|
_MinChars | Returns the minimum of chars necessary to send AJAX request |
Must return an integer value.
|
_HttpMethod | Returns the HTTP method to use |
Return string value.
|
_Open | Bind all results item if one result is opened |
|
_QueryArg | Returns the query param to use |
Return string value. |
_Position | Calculate results position |
|
_Post | Deal with request response |
response argument is a string value. Value returned must be a string or an array of ResponseItem
|
_Render | Execute the render of results DOM element |
response argument must be a string or an array of ResponseItem.
|
_RenderResponseItems | Make rendered for JSON returned |
|
_RenderRaw | Make rendered for HTML returned |
|
_Pre | Return the autocomplete value to send (before request) |
Returns a string value.
|
_Select | Choice one result item |
item argument must be a HTMLElement.
|
_Url | Returns the URL to use for AJAX request |
Value returned must be a string.
|
A bug ? Open an issue on GitHub
Created, developed, designed proposed by
Baptiste Donaux