Tag autocomplete.

This commit is contained in:
Floorb 2021-08-05 10:26:43 -04:00
parent 0bffb397d6
commit 4303d83253
2 changed files with 35 additions and 16 deletions

18
api/tags_autocomplete.php Normal file
View file

@ -0,0 +1,18 @@
<?php
define('IN_PONEPASTE', 1);
require_once(__DIR__ . '/../includes/common.php');
require_once(__DIR__ . '/../includes/Tag.class.php');
header('Content-Type: application/json');
if (empty($_GET['tag'])) {
die(json_encode(['error' => true, 'message' => 'No tag name provided']));
}
$tag_name = Tag::cleanTagName($_GET['tag']);
$tag_name = str_replace('%', '', $tag_name); /* get rid of MySQL LIKE wildcards */
$results = $conn->query('SELECT name FROM tags WHERE name LIKE ?', [$tag_name . '%']);
echo json_encode($results->fetchAll());

View file

@ -25,15 +25,25 @@
}); });
</script> </script>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { function setupTagsInput() {
const tagsInput = document.getElementById('tags-with-source'); const tagsInput = document.getElementById('tags-with-source');
new BulmaTagsInput(tagsInput, { new BulmaTagsInput(tagsInput, {
autocomplete: { source: async function(value) {
<!-- Json to be completed --> // Value equal input value
source: "", // We can then use it to request data from external API
return await fetch("/api/tags_autocomplete.php?tag=" + encodeURIComponent(value))
.then(function(response) {
return response.json();
});
} }
}); });
}, false); }
if (document.readyState !== 'loading') {
setupTagsInput();
} else {
document.addEventListener('DOMContentLoaded', setupTagsInput);
}
</script> </script>
<main class="bd-main"> <main class="bd-main">
<div class="bd-side-background"></div> <div class="bd-side-background"></div>
@ -237,19 +247,15 @@
<div class='row is-full'> <div class='row is-full'>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<div class="field"> <div class="field">
<label class="label">Tags</label> <label class="label">Tags</label>
<div class="control"> <div class="control">
<input id="tags-with-source" name="tag_input" class="input" data-max-tags="10" <input id="tags-with-source" name="tag_input" class="input" data-max-tags="10"
data-max-chars="40" type="text" data-item-text="name" data-max-chars="40" type="text" data-item-text="name" data-item-value="name"
data-case-sensitive="false" placeholder="10 Tags Maximum" data-case-sensitive="false" placeholder="10 Tags Maximum"
value="<?php echo (isset($_POST['tag_input'])) ? $_POST['tag_input'] : ''; // Pre-populate if we come here on an error" ?>"> value="<?php echo (isset($_POST['tag_input'])) ? $_POST['tag_input'] : ''; // Pre-populate if we come here on an error" ?>">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -420,12 +426,7 @@
</div> </div>
<?php } ?> <?php } ?>
</div> </div>
</div>
</div>
</div>
</main> </main>
</div>
<script> <script>
function roundToTwo(num) { function roundToTwo(num) {