add simple autocompleter for tags

This commit is contained in:
Andrew Dolgov 2023-04-06 15:51:09 +03:00
parent 0fcc715069
commit af5c64045b
No known key found for this signature in database
GPG Key ID: 1A56B4FA25D4AF2A
2 changed files with 31 additions and 10 deletions

View File

@ -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);

View File

@ -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(', ')}`
});
};
});
});