add simple autocompleter for tags

2 files changed, 31 insertions, 10 deletions

diff --git a/classes/article.php b/classes/article.php
index 609ddeebe..5bddf3bdb 100755
--- a/classes/article.php
+++ b/classes/article.php
@@ -239,8 +239,7 @@ class Article extends Handler_Protected {
 		print json_encode(["id" => (int)$id, "tags" => $this->_get_tags($id)]);
 	}
 
-
-	/*function completeTags() {
+	function completeTags() {
 		$search = clean($_REQUEST["search"]);
 
 		$sth = $this->pdo->prepare("SELECT DISTINCT tag_name FROM ttrss_tags
@@ -250,12 +249,14 @@ class Article extends Handler_Protected {
 
 		$sth->execute([$_SESSION['uid'], "$search%"]);
 
-		print "<ul>";
+		$results = [];
+
 		while ($line = $sth->fetch()) {
-			print "<li>" . $line["tag_name"] . "</li>";
+			array_push($results, $line["tag_name"]);
 		}
-		print "</ul>";
-	}*/
+
+		print json_encode($results);
+	}
 
 	function assigntolabel(): void {
 		$this->_label_ops(true);
diff --git a/js/Article.js b/js/Article.js
index 703b634d5..5f3a8c2e9 100644
--- a/js/Article.js
+++ b/js/Article.js
@@ -333,6 +333,20 @@ const Article = {
 
 		return false;
 	},
+	autocompleteInject: function(elem, targetId) {
+		const target = App.byId(targetId);
+
+		if (!target)
+			return;
+
+		target.value = target.value.split(',')
+			.slice(0, -1)
+			.map((w) => w.trim())
+			.concat([elem.innerText])
+			.join(', ') + ', ';
+
+		target.focus();
+	},
 	editTags: function (id) {
 		const dialog = new fox.SingleUseDialog({
 			title: __("Article tags"),
@@ -348,7 +362,7 @@ const Article = {
 				<section>
 					<textarea dojoType='dijit.form.SimpleTextarea' rows='4' disabled='true'
 						id='tags_str' name='tags_str'>${__("Loading, please wait...")}</textarea>
-					<div class='autocomplete' id='tags_choices' style='display:none'></div>
+					<span id='tags_choices'></span>
 				</section>
 
 				<footer>
@@ -387,9 +401,15 @@ const Article = {
 					.attr('value', reply.tags.join(", "))
 					.attr('disabled', false);
 
-				/* new Ajax.Autocompleter("tags_str", "tags_choices",
-					"backend.php?op=article&method=completeTags",
-					{tokens: ',', paramName: "search"}); */
+				App.byId('tags_str').onkeyup = (e) => {
+					const last_tag = e.target.value.split(',').pop().trim();
+
+					xhr.json("backend.php", {op: 'article', method: 'completeTags', search: last_tag}, (data) => {
+						App.byId("tags_choices").innerHTML = `${data.map((tag) =>
+							`<a href="#" onclick="Article.autocompleteInject(this, 'tags_str')">${tag}</a>` )
+								.join(', ')}`
+					});
+				};
 			});
 		});