如何在javascript / css中实现标签栏

时间:2015-10-14 16:41:07

标签: javascript html css tags

我试图为一个网页实现一个搜索栏,当你在Stack溢出问题时出现Tag bar基本相同的属性时出现:

enter image description here

它应具有以下属性:

  • 允许用户直接输入。
  • 用与用户输入相同的字母提起entries
  • 允许通过在键盘上删除或按下插入的元素来删除条目。

我有兴趣了解这样一个元素的底层结构,以及如何设置相互调用的侦听器和函数,而不仅仅是代码。有谁能帮我弄清楚我需要实现的功能的骨架?

1 个答案:

答案 0 :(得分:1)

除了使用jQuery UI插件之外,最简单的方法是使用文本输入框和ul。你可以使用jQuery(或其他东西,取决于你是否使用框架)来监听输入框中的任何更改。

此时您可以根据应用的其余部分进行选择:过滤可以在前端或后端进行。由于数据库往往相当快,因此如果您拥有非常大的数据集,则在其中进行过滤可能是有意义的。否则,你可以抓住整个列表并使用JS来过滤它。

无论哪种方式,都会在该更改上发生回调,启动过滤,然后将结果呈现为ul。