Smart jQuery Autocomplete Plugin For Input Fields - Autocomplete.js

File Size: 4.6 KB
Views Total: 2935
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Smart jQuery Autocomplete Plugin For Input Fields - Autocomplete.js

Autocomplete.js is a small jQuery autocomplete plugin for displaying a suggestion list which enables the users to complete text in sequence while typing.

How to use it:

1. Load the necessary jQuery library and jQuery caret plugin in the html document.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.caret-1.5.2.min.js"></script>

2. Download and load the jQuery Autocomplete.js script after jQuery library.

<script src="autocomplete.js"></script>

3. Active the plugin on desired input field.


4. Modify or override the predefined suggestions.

  values: [

5. More configuration options and callbacks with default values.

  collection: 'languages',
  separator: 'and',
  offset: {
    y: 36,
    x: 6
  handler: function () {},
  select: function () {
    return true;

6. The default html template for the suggestion list.

 var _$display = $('<div class="autocomplete" style="z-index:9999999;display:none;position:relative; background-color: white;border: 1px solid #999;top:' + settings.offset.y + 'px;left:' + settings.offset.x + 'px; max-height: 40%; max-width:300px; width:auto; overflow-y: auto;overflow-x: none;"></div>');




  • Work around for Chrome misbehaviour


  • Some improvements

This awesome jQuery plugin is developed by lcavadas. For more Advanced Usages, please check the demo page or visit the official website.