- Overview
- Documents
Completer is a jQuery auto complete plugin. This plugin can be use for autocomplete email, time, domain etc.
Browser Support
- IE 6+
- Chrome 33+
- Firefox 27+
- Safari 5.1+
- Opera 19+
Source: fengyuanchen.github.io
Aug 20, 2014 in Autocomplete 5193 views
Completer is a jQuery auto complete plugin. This plugin can be use for autocomplete email, time, domain etc.
Browser Support
Source: fengyuanchen.github.io
1. INCLUDE CSS AND JS FILES
<script src="/path/to/jquery.js"></script><!-- jQuery is required --> <link href="/path/to/completer.css" rel="stylesheet"> <script src="/path/to/completer.js"></script>
2. HTML
<input class="completer" type="email">
3. JAVASCRIPT
$(".completer").completer({ source: ["gmail.com", "yahoo.com", "hotmail.com", "outlook.com", "live.com", "aol.com"], separator: "@" });
4. OPTIONS
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-separator="@".
Name | Type | Default | Description |
---|---|---|---|
complete | function | function() {} | Will be run when complete. |
itemTag | string | "li" | The element tag of list item. |
filter | function | function(val) { return val; } | The function will be passed the input value and run before show the list. |
position | string | "bottom" | Options: "top", "right", "bottom", "left". |
source | array | [] | The source data for complete or suggest. |
selectedClass | string | "completer-selected" | A jQuery selector string, highlight the item when it's selected. |
separator | string | "" | This will be added between the value and attachment. |
suggest | boolean | false | Set it "true" to start the suggestion mode. |
template | string | "<ul class="completer-container"></ul>" | The container of the completer. |
zIndex | number | 1 | The css "z-index" property for the container. |
Tagged with:
completer
auto complete
jquery plugin
autocomplete
filter
suggestion
auto suggest
domain autocomplete
email autocomplete
Related Articles