如何使用基于 HTML 的用户界面表示多条记录的多对多关系

Question

我正在使用 django，但这适用于任何基于 html 的网络技术。

我想允许用户将许多记录与一个记录条目相关联。

有了一些记录，这可以像这样完成：

问题是当组织数以千计而您无法滚动浏览它们时。

在基于 html 的用户界面中是否有任何最佳实践或最佳方法来实现此类多对多关联？

Answer 1

可以使用多个用户界面来提高应用程序的可用性。

1.提前输入

这被 Twitter、Facebook 和 instagram 广泛使用，以便让用户搜索数据。也可用于多个selection。

https://twitter.github.io/typeahead.js/

2。在下拉列表中搜索

这允许用户点击下拉菜单然后过滤然后 select 多个项目作为 he/she 喜欢。

http://silviomoreto.github.io/bootstrap-select/

3。标签输入

经常使用标签 selection，这些标签总是多而宽。

http://timschlechter.github.io/bootstrap-tagsinput/examples/

对我来说，我更喜欢预先输入，它将 selected 项目添加到占位符，并使用时间图标将其显示给用户以便删除。您可能希望使用 AJAX 来获取预输入数据，而不是一次将 1000 条记录传递到页面。

希望这对您有所帮助。