jQuery Completer Examples

Initialize with completer and data-* attributes

HTML:

<input type="text" 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:

Show list on the top

HTML:

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

Demo:

Filter the input

HTML:

<input type="text" 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" 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>http://</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 = "http://" + $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: