Multi-purpose jQuery Autocomplete & Autosuggest Plugin - Completer

Completer is a simple yet robust jQuery plugin which allows to autocomplete input fields (emails, domains, custom strings, etc) from a dropdown suggestion box.

How to use it:

1. Include required jQuery javascript library at the bottom of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. Include jQuery completer plugin in the page.

<link rel="stylesheet" href="src/completer.css">
<script src="src/completer.js"></script>

3. Create an input filed for email autocomplete.

<input type="text" id="auto-complete-email">

4. Call the plugin on the input field you created and set the source data for complete or suggest.

$("#auto-complete-email").completer({
    separator: "@",
    source: ["gmail.com", "yahoo.com", "hotmail.com", "outlook.com", "live.com", "aol.com", "mail.com"]
});

<input type="text" id="auto-complete-email">

5. Options and defaults. Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-separator="@".

$("#auto-complete-email").completer({
complete: function() {
// Do something when complete
},

itemTag: "li", // The element tag of list item.

filter: function(val) { // The function will be passed the input value and run before show the list.
return val;
},

position: "bottom", // Options: "top", "right", "bottom", "left".
source: [], // The source data for complete or suggest.
selectedClass: "completer-selected", // A jQuery selector string, highlight the item when it's selected.
separator: "", // This will be added between the value and attachment.
suggest: false, // Set it "true" to start the suggestion mode.
template: "<ul class=\"completer-container\"></ul>", // The container of the completer.
zIndex: 1 // The css "z-index" property for the container.
});

Change logs:

v0.1.3 (2016-06-13)

• Added $.fn.completer.noConflict().
• Fixed a bug of the destroy method.
• Improve code style.

v0.1.2 (2015-01-03)

• update.

v0.1.1 (2014-12-07)

• update.

v0.1 (2014-08-09)

• update.

---

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