Skip to content
This repository was archived by the owner on Jan 17, 2021. It is now read-only.

Add support for arrow keys and more #15

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add support for arrow keys and more #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4db52f6
Add support for arrow keys and more
fjl5 Dec 11, 2017
965052b
Only handle right arrow as autocomplete at end of input
fjl5 Dec 11, 2017
3a3aad5
Make '@' separator configurable
Mar 21, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 40 additions & 10 deletions demo/js/jquery.email-autocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,18 @@
var pluginName = "emailautocomplete";
var defaults = {
suggClass: "eac-sugg",
separator: "@",
domains: ["yahoo.com" ,"hotmail.com" ,"gmail.com" ,"me.com" ,"aol.com" ,"mac.com" ,"live.com" ,"comcast.net" ,"googlemail.com" ,"msn.com" ,"hotmail.co.uk" ,"yahoo.co.uk" ,"facebook.com" ,"verizon.net" ,"sbcglobal.net" ,"att.net" ,"gmx.com" ,"outlook.com" ,"icloud.com"]
};

function EmailAutocomplete(elem, options) {
this.$field = $(elem);
this.options = $.extend(true, {}, defaults, options); //we want deep extend
this.options = $.extend(false, {}, defaults, options); //we don't want deep extend, so we can replace the list of domains
this._defaults = defaults;
this._separator = this.options.separator;
this._domains = this.options.domains;
this._index = 0;
this._matches = this._domains;
this.init();
}

Expand Down Expand Up @@ -72,33 +76,52 @@
//bind events and handlers
this.$field.on("keyup.eac", $.proxy(this.displaySuggestion, this));

this.$field.on("blur.eac", $.proxy(this.autocomplete, this));
this.$field.on("focus.eac", $.proxy(this.displaySuggestion, this));
this.$field.on("blur.eac", $.proxy(this.hideSuggestion, this));

this.$field.on("keydown.eac", $.proxy(function(e){
if(e.which === 39 || e.which === 9){
if(e.which === 9){ //tab
this.autocomplete();
} else if(e.which === 39 && this.$field.prop('selectionStart') === this.$field.val().length) { //right arrow
this.autocomplete();
} else if(e.which === 38 && this._index > 0) { //up arrow
this._index--;
this.displaySuggestion(e);
} else if(e.which === 40 && this._index < this._matches.length - 1) { //down arrow
this._index++;
this.displaySuggestion(e);
}
}, this));

this.$suggOverlay.on("mousedown.eac touchstart.eac", $.proxy(this.autocomplete, this));
},

suggest: function (str) {
var str_arr = str.split("@");
this._matches = this._domains;
if (!str.length) {
return "";
}
var str_arr = str.split(this._separator);
if (str_arr.length > 1) {
str = str_arr.pop();
if (!str.length) {
return "";
return this._domains[this._index];
}
} else {
return "";
return this._separator + this._domains[this._index];
}

var match = this._domains.filter(function (domain) {
this._matches = this._domains.filter(function (domain) {
return domain.indexOf(str) === 0;
}).shift() || "";

return match.replace(str, "");
});
if (this._matches.length === 0) {
this._index = 0;
return "";
} else {
this._index = Math.min(this._index, this._matches.length - 1);
var match = this._matches[this._index];
return match.replace(str, "");
}
},

autocomplete: function () {
Expand Down Expand Up @@ -141,6 +164,13 @@
}
},

/**
* Hides the suggestion, handler for blur event
*/
hideSuggestion: function () {
this.$suggOverlay.text("");
},

/**
* indexof polyfill
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#Polyfill
Expand Down
50 changes: 40 additions & 10 deletions dist/jquery.email-autocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,18 @@
var pluginName = "emailautocomplete";
var defaults = {
suggClass: "eac-sugg",
separator: "@",
domains: ["yahoo.com" ,"hotmail.com" ,"gmail.com" ,"me.com" ,"aol.com" ,"mac.com" ,"live.com" ,"comcast.net" ,"googlemail.com" ,"msn.com" ,"hotmail.co.uk" ,"yahoo.co.uk" ,"facebook.com" ,"verizon.net" ,"sbcglobal.net" ,"att.net" ,"gmx.com" ,"outlook.com" ,"icloud.com"]
};

function EmailAutocomplete(elem, options) {
this.$field = $(elem);
this.options = $.extend(true, {}, defaults, options); //we want deep extend
this.options = $.extend(false, {}, defaults, options); //we don't want deep extend, so we can replace the list of domains
this._defaults = defaults;
this._separator = this.options.separator;
this._domains = this.options.domains;
this._index = 0;
this._matches = this._domains;
this.init();
}

Expand Down Expand Up @@ -72,33 +76,52 @@
//bind events and handlers
this.$field.on("keyup.eac", $.proxy(this.displaySuggestion, this));

this.$field.on("blur.eac", $.proxy(this.autocomplete, this));
this.$field.on("focus.eac", $.proxy(this.displaySuggestion, this));
this.$field.on("blur.eac", $.proxy(this.hideSuggestion, this));

this.$field.on("keydown.eac", $.proxy(function(e){
if(e.which === 39 || e.which === 9){
if(e.which === 9){ //tab
this.autocomplete();
} else if(e.which === 39 && this.$field.prop('selectionStart') === this.$field.val().length) { //right arrow
this.autocomplete();
} else if(e.which === 38 && this._index > 0) { //up arrow
this._index--;
this.displaySuggestion(e);
} else if(e.which === 40 && this._index < this._matches.length - 1) { //down arrow
this._index++;
this.displaySuggestion(e);
}
}, this));

this.$suggOverlay.on("mousedown.eac touchstart.eac", $.proxy(this.autocomplete, this));
},

suggest: function (str) {
var str_arr = str.split("@");
this._matches = this._domains;
if (!str.length) {
return "";
}
var str_arr = str.split(this._separator);
if (str_arr.length > 1) {
str = str_arr.pop();
if (!str.length) {
return "";
return this._domains[this._index];
}
} else {
return "";
return this._separator + this._domains[this._index];
}

var match = this._domains.filter(function (domain) {
this._matches = this._domains.filter(function (domain) {
return domain.indexOf(str) === 0;
}).shift() || "";

return match.replace(str, "");
});
if (this._matches.length === 0) {
this._index = 0;
return "";
} else {
this._index = Math.min(this._index, this._matches.length - 1);
var match = this._matches[this._index];
return match.replace(str, "");
}
},

autocomplete: function () {
Expand Down Expand Up @@ -141,6 +164,13 @@
}
},

/**
* Hides the suggestion, handler for blur event
*/
hideSuggestion: function () {
this.$suggOverlay.text("");
},

/**
* indexof polyfill
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#Polyfill
Expand Down
2 changes: 1 addition & 1 deletion dist/jquery.email-autocomplete.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

50 changes: 40 additions & 10 deletions src/jquery.email-autocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,18 @@
var pluginName = "emailautocomplete";
var defaults = {
suggClass: "eac-sugg",
separator: "@",
domains: ["yahoo.com" ,"hotmail.com" ,"gmail.com" ,"me.com" ,"aol.com" ,"mac.com" ,"live.com" ,"comcast.net" ,"googlemail.com" ,"msn.com" ,"hotmail.co.uk" ,"yahoo.co.uk" ,"facebook.com" ,"verizon.net" ,"sbcglobal.net" ,"att.net" ,"gmx.com" ,"outlook.com" ,"icloud.com"]
};

function EmailAutocomplete(elem, options) {
this.$field = $(elem);
this.options = $.extend(true, {}, defaults, options); //we want deep extend
this.options = $.extend(false, {}, defaults, options); //we don't want deep extend, so we can replace the list of domains
this._defaults = defaults;
this._separator = this.options.separator;
this._domains = this.options.domains;
this._index = 0;
this._matches = this._domains;
this.init();
}

Expand Down Expand Up @@ -65,33 +69,52 @@
//bind events and handlers
this.$field.on("keyup.eac", $.proxy(this.displaySuggestion, this));

this.$field.on("blur.eac", $.proxy(this.autocomplete, this));
this.$field.on("focus.eac", $.proxy(this.displaySuggestion, this));
this.$field.on("blur.eac", $.proxy(this.hideSuggestion, this));

this.$field.on("keydown.eac", $.proxy(function(e){
if(e.which === 39 || e.which === 9){
if(e.which === 9){ //tab
this.autocomplete();
} else if(e.which === 39 && this.$field.prop('selectionStart') === this.$field.val().length) { //right arrow
this.autocomplete();
} else if(e.which === 38 && this._index > 0) { //up arrow
this._index--;
this.displaySuggestion(e);
} else if(e.which === 40 && this._index < this._matches.length - 1) { //down arrow
this._index++;
this.displaySuggestion(e);
}
}, this));

this.$suggOverlay.on("mousedown.eac touchstart.eac", $.proxy(this.autocomplete, this));
},

suggest: function (str) {
var str_arr = str.split("@");
this._matches = this._domains;
if (!str.length) {
return "";
}
var str_arr = str.split(this._separator);
if (str_arr.length > 1) {
str = str_arr.pop();
if (!str.length) {
return "";
return this._domains[this._index];
}
} else {
return "";
return this._separator + this._domains[this._index];
}

var match = this._domains.filter(function (domain) {
this._matches = this._domains.filter(function (domain) {
return domain.indexOf(str) === 0;
}).shift() || "";

return match.replace(str, "");
});
if (this._matches.length === 0) {
this._index = 0;
return "";
} else {
this._index = Math.min(this._index, this._matches.length - 1);
var match = this._matches[this._index];
return match.replace(str, "");
}
},

autocomplete: function () {
Expand Down Expand Up @@ -134,6 +157,13 @@
}
},

/**
* Hides the suggestion, handler for blur event
*/
hideSuggestion: function () {
this.$suggOverlay.text("");
},

/**
* indexof polyfill
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#Polyfill
Expand Down