web ui：如何提供多選的大列表

Question

我正在尋找任何人可能已經看到的有關如何有效地呈現項目列表（總共約1500）的任何示例，以便可以選擇多個項目。

我見過幾個類似的問題，其中的答案顯示自動完成，它可以選擇單個項目，但沒有解決如何讓用戶選擇多個項目。

任何建議，或特別是可能有潛在解決方案的web應用程序的指針，將不勝感激！

Answer 1

我想不出任何可用網絡應用程序我使用它顯示了1500我必須從中選擇的東西。

我的建議是以某種方式打破這個列表（例如，作爲一系列較小的選擇，然後您可以允許多個選項）。你在問什麼聽起來像是一個可用性的噩夢。

Answer 2

我會創建一個容器（DIV），通過在文本輸入中鍵入文本來填充項目。文本輸入基本上對所有可用項目執行基本過濾器。這些項目將作爲可選元素出現在容器中，並且所選項目將被轉移到單獨的容器（以便能夠執行多次搜索）。

Answer 3

我在想Google如何用Gmail做這件事。

首先，您可以將複選框放在用戶可以單獨選擇的每個項目旁邊。然後放置一個過濾器/搜索框，可以選擇/取消選擇所有匹配（添加/從選擇中減去）。你也可以在文本框上實現自動完成。

其他過濾選項（按標籤，按日期等）也很適合這種方法。這取決於你想要列出什麼樣的項目。

如果項目之間存在某些常見分組，則也可以將列表排列在一組子列表中。仍然有複選框，但可以將列表框排列在一起（在用戶選擇要查看的父節點時，在右側的下一個框中填充子項）。或者一個簡單的treeview可能會。

Answer 4

對不起，已經晚了幾年......我希望這至少有助於某人。

我會說使用Eric Hynds's multiselect或它的更大版本。好的，也許這不是1500個項目的最佳界面，但也許它是正確的。這有點類似於谷歌的處理，除了幾乎不支持鍵盤導航。

它修改規則的選擇多，在HTML的Dropbox，具有非常定製和可點擊列表，它可以過濾（目前）OR組輕鬆 - 在這個時候，過濾器和分組不在一起工作相當好。

如果需要，您可以使用此多重選擇和另一個顯示所選內容的框。你甚至可以用just tweak it (look at example #8)這樣做。

Answer 5

它已經因爲這被張貼了一段時間，但在此期間一些非常好的多選「標籤輸入」或「碉堡」式的選擇變得可用：

https://harvesthq.github.io/chosen/

這是一個夢幻般的解決方案適用於許多情況 - 試用！