diff options
author | Andrew Dolgov <[email protected]> | 2023-04-06 15:51:09 +0300 |
---|---|---|
committer | Andrew Dolgov <[email protected]> | 2023-04-06 15:51:09 +0300 |
commit | af5c64045b436357006500afb448b266d927e65a (patch) | |
tree | 71a8d41771fda4566cc33994140bafcb6765689b | |
parent | 0fcc7150693f88f01d09ee14ddf3c7f8c844eaae (diff) |
add simple autocompleter for tags
-rwxr-xr-x | classes/article.php | 13 | ||||
-rw-r--r-- | js/Article.js | 28 |
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(', ')}` + }); + }; }); }); |