autocomplete.js | Remote AutoComplete Lite, Fast and Stable | v2.6

autocomplete.js

autocomplete.js is a fast and lightweight autocomplete library, without any dependencies.


Lite

9 KB

Fast

Native JavaScript

Remote Power

No data pre-loaded.
Only AJAX.

Hackable

Functions overridable

# Install autocomplete-js
$ npm install autocomplete-js@2.6.* --save
// In your file
var AutoComplete = require("autocomplete-js");
AutoComplete();
# Install
$ bower install autocomplete.js#2.6.* --save

Download the last stable version


Client integration

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

Server response

// JSON array
[
    "France",
    "United States",
    "Germany"
]

// OR JSON object
{
    "FR": "France",
    "USA": "United States",
    "DE": "Germany"
}

Documentation

Value arguments

Parameter Definition Snippets
Delay Integer value.
Must be a positive value.
Time between the keyboard event and request sent.
150
AutoComplete({
  Delay: 300,
});
EmptyMessage String value.
Message displayed when no result found.
No result here
AutoComplete({
  EmptyMessage: "Oh Sh*t ! No results !",
});
<input
  data-autocomplete-empty-message="My message"
/>
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.
{
  getRegex: function (value) {
    return new RegExp(value, "ig");
  },
  transform: function(value) {
    return "<strong>" + value + "</strong>";
  }
}
AutoComplete({
  Highlight: {
    getRegex: function (value) {
      return new RegExp(value, "ig");
    },
    transform: function(value) {
      return "<strong>" + value + "</strong>";
    }
  },
});
HttpHeaders JSON value.
HTTP headers sent in request.
{
  "Content-type": "application/x-www-form-urlencoded"
}
AutoComplete({
  HttpHeaders: {
    "token": "sakjfh97325437hskfsdfd"
  }
});
HttpMethod String value.
Contains HTTP method used to send request.
GET
AutoComplete({
  HttpMethod: "POST"
});
<input
  data-autocomplete-method="POST"
/>
Limit Integer value.
When value == 0, no limit applied.
When value > 0, display only X items.
When value < 0, display only last X items.
0
AutoComplete({
  Limit: 10
});
<input
  data-autocomplete-limit="10"
/>
MinChars Integer value.
Send request only when input value has a lenght greather than MinChars parameter.
0
AutoComplete({
  MinChars: 2
});
<input
  data-autocomplete-minchars="2"
/>
QueryArg String value.
Parameter name used to send value into the request.
q
AutoComplete({
  QueryArg: "query_search"
});
<input
  data-autocomplete-param-name="query_search"
/>
Url String value.
Parameter name used to send value into the request.
No default value
AutoComplete({
  Url: "/my/url"
});
<input
  data-autocomplete="/my/url"
/>
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
{
  "KeyboardMappings": {
    "Enter": {
        Conditions: [{
            Is: 13,
            Not: false
        }],
        Callback: function() {
            if (this.DOMResults.getAttribute("class").indexOf("open") != -1) {
                var liActive = this.DOMResults.querySelector("li.active");

                if (liActive !== null) {
                    this._Select(liActive);
                    this.DOMResults.setAttribute("class", "autocomplete");
                }
            }
        },
        Operator: ConditionOperator.AND,
        Event: EventType.KEYUP
    },
    "KeyUpAndDown_up": {...},
    "KeyUpAndDown_down": {...},
    "AlphaNum": {...}
}
AutoComplete({
  KeyboardMappings: {...}
});

Method arguments

Method Definition Snippets
_Blur Method to hide results
AutoComplete({
  _Blur: function(now) {
  }
});
now argument is a boolean value. The default value is false.
_Cache Method to manage cache
AutoComplete({
  _Cache: function(value) {
  }
});
value argument is a string value (value of input autocomplete). If the method returns undefined, a new request is sent.
_EmptyMessage Return the message when no result returns
AutoComplete({
  _EmptyMessage: function() {
  }
});
The value returned is a string.
Empty message to display when no results found.
_Focus Manage the display of results (only to display - Hide results, see the method _Blur)
AutoComplete({
  _Focus: function() {
  }
});
_Highlight Highlight part of results which match with query search.
AutoComplete({
  _Highlight: function(label) {
  }
});
label argument is the item result. Must return a string value. label argument highlighted.
_Limit Returns the maximum number of results
AutoComplete({
  _Limit: function() {
  }
});
Must return an integer value.
_MinChars Returns the minimum of chars necessary to send AJAX request
AutoComplete({
  _MinChars: function() {
  }
});
Must return an integer value.
_HttpMethod Returns the HTTP method to use
AutoComplete({
  _HttpMethod: function() {
  }
});
Return string value.
_Open Bind all results item if one result is opened
AutoComplete({
  _Open: function() {
  }
});
_QueryArg Returns the query param to use
AutoComplete({
  _QueryArg: function() {
  }
});
Return string value.
_Position Calculate results position
AutoComplete({
  _Position: function() {
  }
});
_Post Deal with request response
AutoComplete({
  _Post: function(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
AutoComplete({
  _Render: function(response) {
  }
});
response argument must be a string or an array of ResponseItem.
_RenderResponseItems Make rendered for JSON returned
AutoComplete({
  _RenderResponseItems: function(response) {
  }
});
_RenderRaw Make rendered for HTML returned
AutoComplete({
  _RenderRaw: function(response) {
  }
});
_Pre Return the autocomplete value to send (before request)
AutoComplete({
  _Pre: function() {
  }
});
Returns a string value.
_Select Choice one result item
AutoComplete({
  _Select: function(item) {
  }
});
item argument must be a HTMLElement.
_Url Returns the URL to use for AJAX request
AutoComplete({
  _Url: function() {
  }
});
Value returned must be a string.

Contributed

Created, developed, designed proposed by