jquery 郵箱自動補全
阿新 • • 發佈：2018-12-18
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> </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; }