textcomplete: return up to 100 items and look for for matches in the entire string (not just the beginning) when suggesting emojis

2 files changed, 34 insertions, 12 deletions

diff --git a/view/js/autocomplete.js b/view/js/autocomplete.js
index 034427fe7..aa580b163 100644
--- a/view/js/autocomplete.js
+++ b/view/js/autocomplete.js
@@ -195,12 +195,12 @@ function string2bb(element) {
 
 
 		smilies = {
-			match: /(^|\s)(:[a-z_:]{2,})$/,
+			match: /(^|\s)(:[a-z0-9_:]{2,})$/,
 			index: 2,
 			cache: true,
-			search: function(term, callback) { $.getJSON('/smilies/json').done(function(data) { callback($.map(data, function(entry) { return entry.text.indexOf(term) === 0 ? entry : null; })); }); },
-			//template: function(item) { return item.icon + item.text; },
+			search: function(term, callback) { $.getJSON('/smilies/json').done(function(data) { callback($.map(data, function(entry) { return entry.text.indexOf(term.substr(1)) !== -1 ? entry : null; })); }); },
 			replace: function(item) { return "$1" + item.text + ' '; },
+			context: function(text) { return text.toLowerCase(); },
 			template: smiley_format
 		};
 		this.attr('autocomplete','off');
@@ -209,8 +209,12 @@ function string2bb(element) {
 
 		$(this).each(function() {
 			var editor = new Textarea(this);
-			var textcomplete = new Textcomplete(editor);
-			textcomplete.register([contacts,forums,smilies,tags], {className:'acpopup', zIndex:1020});
+			var textcomplete = new Textcomplete(editor, {
+				dropdown: {
+					maxCount: 100
+				}
+			});
+			textcomplete.register([contacts,forums,smilies,tags]);
 		});
 
 
@@ -264,8 +268,12 @@ function string2bb(element) {
 
 		$(this).each(function() {
 			var editor = new Textarea(this);
-			textcomplete = new Textcomplete(editor);
-			textcomplete.register([contacts,forums,tags], {className:'acpopup', maxCount:100, zIndex: 1020, appendTo:'nav'});
+			textcomplete = new Textcomplete(editor, {
+				dropdown: {
+					maxCount: 100
+				}
+			});
+			textcomplete.register([contacts,forums,tags]);
 		});
 
 		textcomplete.on('selected', function() { this.editor.el.form.submit(); });
@@ -299,8 +307,12 @@ function string2bb(element) {
 
 		$(this).each(function() {
 			var editor = new Textarea(this);
-			textcomplete = new Textcomplete(editor);
-			textcomplete.register([contacts], {className:'acpopup', zIndex:1020});
+			textcomplete = new Textcomplete(editor, {
+				dropdown: {
+					maxCount: 100
+				}
+			});
+			textcomplete.register([contacts]);
 		});
 
 		if(autosubmit)
@@ -338,8 +350,12 @@ function string2bb(element) {
 
 		$(this).each(function() {
 			var editor = new Textarea(this);
-			textcomplete = new Textcomplete(editor);
-			textcomplete.register([names], {className:'acpopup', zIndex:1020});
+			textcomplete = new Textcomplete(editor, {
+				dropdown: {
+					maxCount: 100
+				}
+			});
+			textcomplete.register([names]);
 		});
 
 		if(autosubmit)
@@ -420,7 +436,7 @@ function string2bb(element) {
 		$(this).each(function() {
 			var editor = new Textarea(this);
 			var textcomplete = new Textcomplete(editor);
-			textcomplete.register([bbco], {className:'acpopup', zIndex:1020});
+			textcomplete.register([bbco]);
 		});
 
 		this.keypress(function(e){
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 4f0658477..489d71735 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1474,6 +1474,12 @@ blockquote {
 	background-color: $item_colour;
 }
 
+.textcomplete-dropdown {
+	max-height: 300px;
+	max-width: 250px;
+	overflow: auto;
+}
+
 .dropdown-item.active {
 	color: #fff;
 	background-color: #007bff;