Insignia实例API完全手册：掌握addItem、removeItem等关键方法

Insignia实例API完全手册掌握addItem、removeItem等关键方法【免费下载链接】insignia Customizable tag input. Progressive. No non-sense!项目地址: https://gitcode.com/gh_mirrors/in/insigniaInsignia是一个轻量级的可定制标签输入库提供了直观的API来管理标签的添加、删除和查询操作。本文将详细介绍Insignia实例的核心API方法帮助开发者快速掌握如何使用这些方法构建交互式标签输入功能。核心API概览Insignia实例通过简单的API提供了完整的标签管理功能主要包括以下方法添加标签addItem(data)删除标签removeItem(data)、removeItemByElement(el)查询标签findItem(data)、findItemIndex(data)、findItemByElement(el)实例管理destroy()这些方法定义在insignia.js文件中通过实例化后的对象暴露给开发者使用。标签添加addItem方法addItem方法是向标签输入框添加新标签的核心接口它接受一个数据参数并创建对应的标签元素。基本用法// 假设insignia实例已创建 const tagInput insignia(inputElement); // 添加文本标签 tagInput.addItem(JavaScript); // 添加对象类型标签需配置getValue和getText选项 tagInput.addItem({ id: 1, name: TypeScript });方法解析在insignia.js中定义function addItem (data) { const valid validate(data); const item { data, valid }; if (o.preventInvalid !valid) { return api; } const el renderItem(item); if (!el) { return api; } item.el el; currentValues.push(item); api.emit(add, data, el); invalidate(); return api; }关键点自动验证标签有效性通过validate函数支持自定义渲染通过renderItem添加成功后触发add事件链式调用支持返回api实例标签删除removeItem系列方法Insignia提供了多种删除标签的方式满足不同场景的需求。removeItemByData通过数据对象删除对应的标签// 删除文本标签 tagInput.removeItem(JavaScript); // 删除对象标签 tagInput.removeItem({ id: 1, name: TypeScript });实现代码insignia.jsfunction removeItemByData (data) { return removeItem(findItem(data)); }removeItemByElement通过DOM元素引用删除对应的标签// 获取标签元素 const tagElement document.querySelector(.nsg-tag); // 通过元素删除标签 tagInput.removeItemByElement(tagElement);实现代码insignia.jsfunction removeItemByElement (el) { return removeItem(findItem(el, el)); }删除流程查找标签数据或元素移除DOM元素更新内部数据存储触发remove事件标签查询findItem系列方法Insignia提供了灵活的标签查询功能可通过数据或元素查找标签。findItem根据数据查找标签项const tag tagInput.findItem(JavaScript); if (tag) { console.log(找到标签:, tag.data); }实现代码insignia.jsfunction findItem (value, propdata) { const comp (prop data ? item getValue(item[prop]) getValue(value) : item item[prop] value ); for (let i 0; i currentValues.length; i) { if (comp(currentValues[i])) { return currentValues[i]; } } return null; }findItemIndex获取标签在列表中的索引位置const index tagInput.findItemIndex(JavaScript); if (index ! null) { console.log(标签索引:, index); }findItemByElement通过DOM元素查找对应的标签数据const tagElement document.querySelector(.nsg-tag); const tag tagInput.findItemByElement(tagElement);实例销毁destroy方法当不再需要标签输入功能时使用destroy方法清理资源// 销毁实例 tagInput.destroy();实现代码insignia.jsfunction destroy () { bind(true); el.value ; el.className el.className.replace(inputClass, ); parent.className parent.className.replace(editorClass, ); if (before.parentElement) { before.parentElement.removeChild(before); } if (after.parentElement) { after.parentElement.removeChild(after); } shrinker.destroy(); api.destroyed true; api.destroy api.addItem api.removeItem () api; api.tags api.value () null; return api; }清理操作移除事件监听清除输入框内容恢复DOM结构释放相关资源实际应用示例以下是一个综合使用Insignia API的示例// 初始化Insignia const input document.getElementById(tag-input); const tagInput insignia(input, { delimiter: ,, deletion: true, validate: (data) data.trim().length 0 }); // 添加初始标签 [HTML, CSS, JavaScript].forEach(tag { tagInput.addItem(tag); }); // 查找并删除标签 const cssTag tagInput.findItem(CSS); if (cssTag) { tagInput.removeItem(cssTag.data); } // 监听添加事件 tagInput.on(add, (data, el) { console.log(添加新标签:, data); }); // 页面卸载时销毁实例 window.addEventListener(unload, () { tagInput.destroy(); });总结Insignia通过简洁而强大的API使开发者能够轻松实现自定义标签输入功能。核心方法包括addItem添加新标签removeItem/removeItemByElement删除标签findItem系列查询标签destroy清理实例这些方法在insignia.js中实现提供了灵活的标签管理能力。通过合理使用这些API可以构建出交互友好、功能完善的标签输入组件。【免费下载链接】insignia Customizable tag input. Progressive. No non-sense!项目地址: https://gitcode.com/gh_mirrors/in/insignia创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考