completer自动完成

由于项目需要，在输入框中要做一些输入限制的同时，更加要求用户体验，提供一些自动完成设置。所以有需求，总会有解决方式，下面说一下自动完成插件的原理：

html的body部分：

<span style="font-family:KaiTi_GB2312;font-size:18px;"><div di="main" style="background:url(2banner.jpg);">

	<div class="demo">
		<p>1、输入邮箱号：</p>
    	<input type="text" id="auto-complete-email" class="form-control" placeholder="E-mail">
		<p> </p>
		<p>2、输入时间：</p>
    	<input type="text" id="auto-complete-time" class="form-control">
		<p> </p>
		<p>3、输入域名：</p>
		<div class="input-group">
			<span class="input-group-addon">www.</span>
			<input id="auto-complete-domain" class="form-control" type="text" placeholder="请输入域名" autocomplete="off" style="z-index:0"> <span class="input-group-btn"><a id="auto-complete-go" class="btn btn-default" href="javascript:void(0);">Go!</a></span>
		</div>

	</div>

</div></span>

html中的JavaScript方法（自动完成功能块）

<span style="font-family:KaiTi_GB2312;font-size:18px;">$(function(){
	$("#auto-complete-email").completer({
		separator: "@",
		source: ["163.com", "qq.com", "126.com", "139.com", "gmail.com", "hotmail.com", "icloud.com"]
	});
	$("#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"]
	});

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

});</span>

效果图：

参数分析：

感谢您的宝贵时间······