TagsElementFactory

TagsElementFactory - Factory for creating tags/chips input elements Converts a text input into a tags input with: - Multiple value support as visual tags/chips - Keyboard navigation (Enter to add, Backspace to remove) - Autocomplete integration - Hidden inputs for form submission - Click to focus behavior

หน้านี้สร้างจากซอร์สโดยตรงเมื่อ 2026-08-21 คำอธิบายมาจาก JSDoc ในไฟล์
รันซ้ำได้ด้วย docs_scaffold เมื่อโค้ดเปลี่ยน อย่าแก้ด้วยมือถ้าตั้งใจให้ generate ต่อ

ที่มา

• ไฟล์: Now/js/TagsElementFactory.js (1028 บรรทัด)
• รูปแบบ: ES class

เมธอดสาธารณะ (17)

static addTag(instance, key, value)

Add one tag, creating its chip and hidden input. Refused when config.maxTags is already reached, and the user is told through NotificationManager rather than the tag silently vanishing.

static cleanup(instance)

Tear the tags input down. Closes the shared dropdown only when this input is the one currently using it, so tearing down one field cannot close another field's suggestions.

static clearTags(instance)

Remove every tag. Works through removeTag, so the readonly and disabled checks still apply.

static createListItem(instance, key, value, search)

Build one suggestion row for the dropdown. The label goes through i18n when available, and the part matching search is highlighted.

static escapeRegExp(str)

Escape a string for safe use inside a regular expression. Used when highlighting the query inside suggestion labels, so a query containing regex characters cannot break the match.

static extractCustomConfig(element, def, dataset)

Read the tag options a single element declares through its data attributes. Covers data-separator, data-max-tags, data-duplicates and the autocomplete settings; anything absent falls back to def.

static getTags(instance)

The current tags, as copies. Each entry is cloned so callers cannot mutate the instance's own state.

static populateFromOptions(element, optionsData, optionsKey)

Populate tags input from provided options object

static populateFromOptionsInContainer(container, optionsData)

Populate all tags inputs with data-options-key attribute

static readFromDatalist(element)

Read suggestions from the <datalist> an input points at.

static refreshTagLabels(instance)

Update visible tag text from autocomplete source (value → text) when source arrives late or tags were added with key===value before options existed.

static removeTag(instance, key)

Remove one tag and its hidden input. Refused while the input is readonly or disabled.

static setTags(instance, tags)

Replace the current tags with a new list. Entries may be plain strings, where the same text is used as both key and label, or objects carrying key and value.

static setupAutocomplete(instance)

Attach the suggestion dropdown to the tags input. Uses the shared DropdownPanel singleton rather than creating a panel per field, so only one suggestion list is ever open on the page.

static setupElement(instance)

Turn a plain text input into a tags input. The original name is stashed on the instance first, because the visible input stops carrying the value — hidden inputs created per tag do, so the form still submits every tag.

static setupEventHandlers(instance)

Bind the keyboard and click behaviour of the tags input. Guarded by an internal flag so calling it twice does not register duplicate listeners on the same input.

static updateOptions(instance, options)

Replace the suggestion list. Grouped sources are flattened first, so a grouped option list still yields a flat set of suggestions.

Data attribute ที่ใช้

data-autocomplete · data-duplicates · data-key · data-max-tags · data-options-key · data-separator · data-source · data-tag-key

พึ่งพาคลาสอื่น

DropdownPanel · ElementFactory · ElementManager · EventManager · EventSystemManager · NotificationManager · TextElementFactory · Utils