首先引入自动完成插件completer

<link rel="stylesheet" type="text/css" href="completer.css"/>  
<script src="completer.min.js"></script>

演示一：输入邮箱email

<input type="text" id="auto-complete-email" class="input" placeholder="E-mail"/>

$("#auto-complete-email").completer({
    separator: "@",
    source: ["163.com", "qq.com", "126.com", "139.com", "gmail.com", "hotmail.com", "icloud.com"]
});

演示二：输入时间

<input type="text" id="auto-complete-time" class="input"/>

$("#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"]
});

演示三：输入域名

<input id="auto-complete-domain" class="input" type="text" placeholder="请输入域名" autocomplete="off" />

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"]
});