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> </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;
}
上一篇： 开发拾遗
推荐阅读
-
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
-
jquery实现的网页自动播放声音_jquery
-
再说AutoComplete自动补全之实现原理_jquery
-
js自动闭合html标签(自动补全html标记)_javascript技巧
-
Eclipse增强自动补全，取消“=”等号和空格自动输入
-
基于JQuery实现的图片自动进行缩放和裁剪处理_jquery
-
JS输入用户名自动显示邮箱后缀列表的方法_javascript技巧
-
jquery 模拟类搜索框自动完成搜索提示功能(改进)_jquery
-
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果_jquery
-
多种方法实现360浏览器下禁止自动填写用户名密码_jquery