欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jquery 邮箱自动补全

程序员文章站 2022-06-01 12:55:47
...

HTML 页面代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> jQuery自动完成插件</title>
<meta name="keywords" content="jquery" />
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" href="bootstrap.css">
<style type="text/css">
.demo{width:360px;margin:50px auto 10px auto;padding:10px;}
.demo p{line-height:30px}
</style>
<script src="jquery.min.js"></script>
<script src="index.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"]
	});
	 
	
	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 id="main">
	<div class="demo">
		<p>1、输入邮箱号:</p>
    	<input type="text" id="auto-complete-email" class="form-control" placeholder="E-mail">
		<p>&nbsp;</p>
		 
		<p>2、输入域名:</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>
</body>
</html>

base.js 源码

    function(a) {
        "function" == typeof define && define.amd ? define(["jquery"], a) : a("object" == typeof exports ? require("jquery") : jQuery)
    } (function(a) {
        "use strict";
        var b = a(window),
            c = a(document),
            d = function(b, c) {
                this.$element = a(b),
                    this.defaults = a.extend({},
                        d.defaults, this.$element.data(), a.isPlainObject(c) ? c: {}),
                    this.init()
            },
            e = function(a) {
                return "string" == typeof a && "" !== a ? (a = f(a), new RegExp(a + "+[^" + a + "]*$", "i")) : null
            },
            f = function(a) {
                return a.replace(/([\.\$\^\{\[\(\|\)\*\+\?\\])/g, "\\$1")
            },
            g = function(b) {
                return "string" == typeof b && (b = b.replace(/[\{\}\[\]"']+/g, "").split(/\s*,+\s*/)),
                    b = a.map(b,
                        function(a) {
                            return "string" != typeof a ? a.toString() : a
                        })
            };
        d.prototype = {
            constructor: d,
            init: function() {
                var b = this.defaults,
                    c = g(b.source);
                c.length > 0 && (this.data = c, this.regexp = e(b.separator), this.$completer = a(b.template), this.$completer.hide().appendTo("body"), this.place(), this.$element.attr("autocomplete", "off").on({
                    focus: a.proxy(this.enable, this),
                    blur: a.proxy(this.disable, this)
                }), this.$element.is(":focus") && this.enable())
            },
            enable: function() {
                this.active || (this.active = !0, this.$element.on({
                    keydown: a.proxy(this.keydown, this),
                    keyup: a.proxy(this.keyup, this)
                }), this.$completer.on({
                    mousedown: a.proxy(this.mousedown, this),
                    mouseover: a.proxy(this.mouseover, this)
                }))
            },
            disable: function() {
                this.active && (this.active = !1, this.$element.off({
                    keydown: this.keydown,
                    keyup: this.keyup
                }), this.$completer.off({
                    mousedown: this.mousedown,
                    mouseover: this.mouseover
                }))
            },
            attach: function(b) {
                var c, d, e = this.defaults.separator,
                    g = this.regexp,
                    h = g ? b.match(g) : null,
                    i = [],
                    j = [],
                    k = this;
                h && (h = h[0], b = b.replace(g, ""), c = new RegExp("^" + f(h), "i")),
                    a.each(this.data,
                        function(a, f) {
                            f = e + f,
                                d = k.template(b + f),
                                c && c.test(f) ? i.push(d) : j.push(d)
                        }),
                    i = i.length ? i.sort() : j,
                "top" === this.defaults.position && (i = i.reverse()),
                    this.fill(i.join(""))
            },
            suggest: function(b) {
                var c = new RegExp(f(b), "i"),
                    d = this,
                    e = [];
                a.each(this.data,
                    function(a, b) {
                        c.test(b) && e.push(b)
                    }),
                    e.sort(function(a, c) {
                        return a.indexOf(b) - c.indexOf(b)
                    }),
                    a.each(e,
                        function(a, b) {
                            e[a] = d.template(b)
                        }),
                    this.fill(e.join(""))
            },
            template: function(a) {
                var b = this.defaults.itemTag;
                return "<" + b + ">" + a + "</" + b + ">"
            },
            fill: function(a) {
                var b;
                this.$completer.empty(),
                    a ? (b = "top" === this.defaults.position ? ":last": ":first", this.$completer.html(a), this.$completer.children(b).addClass(this.defaults.selectedClass), this.show()) : this.hide()
            },
            complete: function() {
                var a = this.defaults,
                    b = a.filter(this.$element.val()).toString();
                return "" === b ? void this.hide() : void(a.suggest ? this.suggest(b) : this.attach(b))
            },
            keydown: function(a) {
                13 === a.keyCode && (a.stopPropagation(), a.preventDefault())
            },
            keyup: function(a) {
                var b = a.keyCode;
                13 === b || 38 === b || 40 === b ? this.toggle(b) : this.complete()
            },
            mouseover: function(b) {
                var c = this.defaults,
                    d = c.selectedClass,
                    e = a(b.target);
                e.is(c.itemTag) && e.addClass(d).siblings().removeClass(d)
            },
            mousedown: function(b) {
                b.stopPropagation(),
                    b.preventDefault(),
                    this.setValue(a(b.target).text())
            },
            setValue: function(a) {
                this.$element.val(a),
                    this.defaults.complete(),
                    this.hide()
            },
            toggle: function(a) {
                var b = this.defaults.selectedClass,
                    c = this.$completer.find("." + b);
                switch (a) {
                    case 40:
                        c.removeClass(b),
                            c = c.next();
                        break;
                    case 38:
                        c.removeClass(b),
                            c = c.prev();
                        break;
                    case 13:
                        this.setValue(c.text())
                }
                0 === c.length && (c = this.$completer.children(40 === a ? ":first": ":last")),
                    c.addClass(b)
            },
            place: function() {
                var a = this.$element,
                    c = a.offset(),
                    d = c.left,
                    e = c.top,
                    f = a.outerHeight(),
                    g = a.outerWidth(),
                    h = {
                        minWidth: g,
                        zIndex: this.defaults.zIndex
                    };
                switch (this.defaults.position) {
                    case "right":
                        h.left = d + g,
                            h.top = e;
                        break;
                    case "left":
                        h.right = b.innerWidth() - d,
                            h.top = e;
                        break;
                    case "top":
                        h.left = d,
                            h.bottom = b.innerHeight() - e;
                        break;
                    default:
                        h.left = d,
                            h.top = e + f
                }
                this.$completer.css(h)
            },
            show: function() {
                this.$completer.show(),
                    b.on("resize", a.proxy(this.place, this)),
                    c.on("mousedown", a.proxy(this.hide, this))
            },
            hide: function() {
                this.$completer.hide(),
                    b.off("resize", this.place),
                    c.off("mousedown", this.hide)
            },
            destroy: function() {
                this.hide(),
                    this.disable(),
                    this.$element.off({
                        focus: this.enable,
                        blur: this.disable
                    })
            }
        },
            d.defaults = {
                itemTag: "li",
                position: "bottom",
                source: [],
                selectedClass: "completer-selected",
                separator: "",
                suggest: !1,
                template: '<ul class="completer-container"></ul>',
                zIndex: 1,
                complete: a.noop,
                filter: function(a) {
                    return a
                }
            },
            d.setDefaults = function(b) {
                a.extend(d.defaults, b)
            },
            a.fn.completer = function(b) {
                var c, e = [].slice.call(arguments, 1);
                return this.each(function() {
                    var f, g = a(this),
                        h = g.data("completer");
                    h || g.data("completer", h = new d(this, b)),
                    "string" == typeof b && a.isFunction(f = h[b]) && (c = f.apply(h, e))
                }),
                    "undefined" != typeof c ? c: this
            },
            a.fn.completer.Constructor = d,
            a.fn.completer.setDefaults = d.setDefaults,
            a(function() {
                a('[data-toggle="completer"],[completer]').completer()
            })
    });

index.css 源码

.completer-container {
  position: absolute;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  line-height: normal;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border-bottom-color: #39f;
}

.completer-container li {
  padding: .5em .8em;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.completer-container .completer-selected,
.completer-container li:hover {
  margin-left: -1px;
  background-color: #eee;
  border-left: 1px solid #39f;
}