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

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.7.* --save
// In your file
var AutoComplete = require("autocomplete-js");
AutoComplete();

# Install
$ bower install autocomplete.js#2.7.* --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.
_Close Method to close result list 
AutoComplete({
  _Close: function() {
  }
});
_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.
_Error Method to manage HTTP request error 
AutoComplete({
  _Error: function() {
  }
});
_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

A bug ? Open an issue on GitHub

Created, developed, designed proposed by