2015-10-14 108 views
0

我试图实施具有基本的web页面的Tag bar的相同属性出现,当你问的堆栈溢出问题,一个搜索栏:如何实现的JavaScript/CSS,标签栏

enter image description here

它应该有以下属性:

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

我有兴趣了解这种元素的底层结构以及如何设置相互调用而不仅仅是代码的监听器和函数。任何人都可以请帮我弄清楚我需要实现的函数的骨架吗?

+1

http://stackoverflow.com/questions/5031162/plugin-to-separate-tags-like-the-stackoverflows-input-tags-interface – epascarello

+0

jQuery UI Autocomplete,http://api.jqueryui.com/autocomplete / – TricksfortheWeb

回答

1

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

在这一点上,你有一个选择,取决于你的应用程序的其余部分:过滤可以发生在前端或后端。因为数据库通常很快,所以如果你有一个非常大的数据集,过滤它可能是有意义的。否则,你可以抓住整个列表并使用JS进行过滤。

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