【问题标题】:How to implement a Tag Bar in javascript / css如何在 javascript/css 中实现标签栏
【发布时间】:2015-10-14 16:41:06
【问题描述】:
我正在尝试为一个网页实现一个搜索栏,该网页具有与您在 Stack Overflow 上提问时出现的 Tag bar 基本相同的属性:
它应该具有以下属性:
- 允许用户直接输入。
- 使用与用户输入相同的字母拉起
entries。
- 允许通过在键盘上删除或按下插入的元素来删除条目。
我有兴趣了解此类元素的底层结构以及如何设置相互调用的侦听器和函数,而不仅仅是代码。谁能帮我弄清楚我需要实现的功能的框架吗?
【问题讨论】:
标签:
javascript
html
css
tags
【解决方案1】:
除了使用 jQuery UI 插件之外,最简单的方法是使用文本输入框和 ul。您可以使用 jQuery(或其他取决于您是否使用框架)来收听输入框中的任何更改。
此时,您可以根据应用的其余部分进行选择:过滤可以在前端或后端进行。因为数据库往往相当快,所以如果您有非常大的数据集,在其中进行过滤可能是有意义的。否则,您可以直接抓取整个列表并使用 JS 对其进行过滤。
无论哪种方式,都会在启动过滤的更改上发生回调,然后将结果呈现到 ul 中。