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 /js | |
parent | 0fcc7150693f88f01d09ee14ddf3c7f8c844eaae (diff) |
add simple autocompleter for tags
Diffstat (limited to 'js')
-rw-r--r-- | js/Article.js | 28 |
1 files changed, 24 insertions, 4 deletions
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(', ')}` + }); + }; }); }); |