Completer v0.1.3

A simple jQuery auto complete plugin.

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="@".

NameTypeDefaultDescription
completefunctionfunction() {}Will be run when complete.
itemTagstring'li'The element tag of list item.
filterfunctionfunction(val) { return val }The function will be passed the input value and run before show the list.
positionstring'bottom'Options: 'top', 'right', 'bottom' and 'left'.
sourcearray[]The source data for complete or suggest.
selectedClassstring'completer-selected'A jQuery selector string, highlight the item when it's selected.
separatorstring''This will be added between the value and attachment.
suggestbooleanfalseSet it "true" to start the suggestion mode.
templatestring'<ul class="completer-container"></ul>'The container of the completer.
zIndexnumber1The 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:

www. Go!

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:

https:// Go!