jQuery completer 自动输入提示

honeyth

2016-07-20

使用说明：

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery自动输入email、时间和域名</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
        <link rel="stylesheet" type="text/css" href="/api/jq/5733e35165ce0/completer.css"/>
        <script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
        <script src="/api/jq/5733e35165ce0/completer.min.js"></script>
        <script type="text/javascript">
            $(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"]
                });
            });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="demo">
                <p>1、输入邮箱号：</p>
                <input type="text" id="auto-complete-email" class="input" placeholder="E-mail"/>
                <p>&nbsp;</p>
                <p>2、输入时间：</p>
                <input type="text" id="auto-complete-time" class="input"/>
                <p>&nbsp;</p>
                <p>3、输入域名：</p>
                <div class="input-group">
                    <span class="input-group-addon">www.</span>
                    <input id="auto-complete-domain" class="input" type="text" placeholder="请输入域名" autocomplete="off" />
                    <span class="input-group-btn">
                        <a id="auto-complete-go" class="btn btn-default" href="javascript:void(0);">Go!</a>
                    </span>
                </div>
            </div>
        </div>
    </body>
</html>

参数详解

参数	描述	默认值
选项	说明	默认值
complete	当输入完成时触发	function() {}
itemTag	弹出展示面板中的列表元素标签	"li"
filter	过滤函数，当输入后会先过滤相关列表内容再展示列表	function(val) { return val; }
position	弹出列表面板相对输入框的位置，值有"top", "right", "bottom", "left".	"bottom"
source	将要自动补全展示的数据	[]
selectedClass	当弹出面板中的选项被选中时的样式	"completer-selected"
separator	分隔符，将输入的内容与建议自动完成的部分分隔，如@	""
suggest	如果设置成true，将会进入建议suggestion模式，将自动匹配所输入的内容	false
template	弹出面板的模板	"<ul class="completer-container"></ul>"
zIndex	弹出面板的css中的z-index值	1