Getting started

Installation

Include 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>

Usage

Initialize with data-toggle="completer" and data-* attributes

HTML:

<input type="text" data-toggle="completer" data-separator="/" data-source="['img', 'css', 'js']">

Demo:

Initialize with $.fn.completer method

HTML:

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

Javascript:

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

Demo:

Configure

Setup

You may set completer options with $().completer(options).

If you want to change the global default options, You may use $.fn.completer.setDefaults(options).

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' and '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.

More demos

Show list on the top

HTML:

<input type="text" data-toggle="completer" data-separator=" " data-source="['foo', 'bar', 'baz', 'qux']" data-position="top">

Demo:

Filter the input

HTML:

<input type="text" data-toggle="completer" data-separator=" " data-source="['foo', 'bar', 'baz', 'qux']" data-position="top">

JavaScript:

$("#auto-complete-time").completer({
  filter: function(val) {
    val = val.replace(/\D/g, "").substr(0, 2);

    if (val) {
      val = parseInt(val, 10) || 0;
      val = val > 23 ? 23 : val < 10 ? "0" + val : val;
    }

    return val;
  },
  separator: ":",
  source: ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"]
});

Demo:

Suggestion mode

HTML:

<input type="text" data-toggle="completer" data-suggest="true" data-source="['foo', 'bar', 'baz', 'qux']">

Demo:

Auto complete a domain

HTML:

<div>
  <span>www.</span>
  <input id="auto-complete-domain" type="text">
  <span>
    <a id="auto-complete-go" href="">Go!</a>
  </span>
</div>

JavaScript:

var $autoCompleteDomain = $("#auto-complete-domain"),
  $autoCompleteGo = $("#auto-complete-go");

  $autoCompleteDomain.completer({
  complete: function() {
    var url = "http://www." + $autoCompleteDomain.val();

    $autoCompleteGo.attr("href", url);
  },
  separator: ".",
  source: ["com", "net", "org", "co", "io", "me", "cn", "com.cn"]
});

Demo:

Auto suggest some websites

HTML:

<div>
  <span>https://</span>
  <input id="auto-suggest-website" type="text">
  <span>
    <a id="auto-suggest-go" href="">Go!</a>
  </span>
</div>

JavaScript:

var $autoSuggestWebsite = $("#auto-suggest-website"),
  $autoSuggestGo = $("#auto-suggest-go");

  $autoSuggestWebsite.completer({
  complete: function() {
    var url = "https://" + $autoSuggestWebsite.val();

    $autoSuggestGo.attr("href", url);
  },
  source: [
    "facebook.com",
    "plus.google.com",
    "linkedin.com",
    "flickr.com",
    "youtube.com",
    "klout.com",
    "reddit.com",
    "digg.com",
    "tumblr.com",
    "twitter.com",
    "stumbleupon.com",
    "pinterest.com"
  ],
  suggest: true
});

Demo: