diff --git a/html/main.html b/html/main.html
index 0fdeb6f3..9fb8a182 100644
--- a/html/main.html
+++ b/html/main.html
@@ -12,18 +12,23 @@
Test audio input device
Test tags and multi-select
-
+
+ Option 1
+ Option 2
+ Option 3
+
-
+
+ Suggestion
+ CD
+ Selected
+ Another
+ Another Suggestion
+ Tag with spaces
+ Invalid#%&@$^@$%Characters
+
Test media preview
diff --git a/ui/fields/tags.js b/ui/fields/tags.js
index 9ebd5c2c..0b643230 100644
--- a/ui/fields/tags.js
+++ b/ui/fields/tags.js
@@ -4,6 +4,7 @@ import { OBField } from '../base/field.js';
class OBFieldTags extends OBField {
#init;
#tags;
+ #suggestions;
#currentTag;
connectedCallback() {
@@ -13,8 +14,12 @@ class OBFieldTags extends OBField {
this.#init = true;
this.#tags = [];
+ this.#suggestions = [];
this.#currentTag = "";
+ this.#tags = this.#loadInnerTags();
+ this.#suggestions = this.#loadInnerSuggestions();
+
this.renderComponent();
}
@@ -140,6 +145,32 @@ class OBFieldTags extends OBField {
this.renderComponent();
}
}
+
+ #loadInnerTags() {
+ var tags = [];
+
+ Array.from(this.children).forEach((child) => {
+ if (child.tagName === 'OB-TAG') {
+ let tag = child.innerText.replace(/ /g, '-').replace(/[^a-zA-Z0-9-_]/g, '');
+ tags.push(tag);
+ }
+ });
+
+ return tags;
+ }
+
+ #loadInnerSuggestions() {
+ var suggestions = [];
+
+ Array.from(this.children).forEach((child) => {
+ if (child.tagName === 'OB-OPTION') {
+ let tag = child.innerText.replace(/ /g, '-').replace(/[^a-zA-Z0-9-_]/g, '');
+ suggestions.push(tag);
+ }
+ });
+
+ return suggestions;
+ }
}
customElements.define('ob-field-tags', OBFieldTags);
\ No newline at end of file