Multi-purpose jQuery Autocomplete & Autosuggest Plugin - Completer
File Size: | 33.8 KB |
---|---|
Views Total: | 3592 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.