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

标签 javascript html css tags

我正在尝试为网页实现一个搜索栏,该网页具有与您在 Stack overflow 上提问时出现的 Tag bar 基本相同的属性:

enter image description here

它应该具有以下属性:

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

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

最佳答案

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

此时,您可以根据应用的其余部分进行选择:过滤可以发生在前端或后端。因为数据库往往相当快,所以如果您有非常大的数据集,在其中进行过滤可能是有意义的。否则,您可以只获取整个列表并使用 JS 对其进行过滤。

无论哪种方式,都会对该更改进行回调以启动过滤,然后将结果呈现到 ul 中。

关于javascript - 如何在 javascript/css 中实现标签栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33131021/

相关文章:

javascript - 如何向内显示一个div到视口(viewport)

javascript - impress.js 中的 Bootstrap 幻灯片

javascript - moment.js 如何使用

javascript - 在后台向图表添加图像

java - 从 MATLAB 运行 JavaScript 命令以获取 PDF 文件

javascript - 如何使用脚本将字符串 (1,234) 转换为数字 (1234)?

html - 在悬停时显示,但仅在悬停的元素上显示

html - 在图像中旋转 View ,而不是图像本身?

html - 使用 CSS 在 div 中定位 anchor 标记

css - 如何使用 CSS 将一组较小的 DIVS 与一个大的 DIVS 相邻