Aby bylo jasné, které položky v dlouhém seznamu jsou vybrány

Použijte Faceted Navigation pattern . Amazon.com s tím odvádí skvělou práci:

(screenshot z těchto výsledky vyhledávání pro Nintendo DS - mějte na paměti, že pokud máte svislé omezení, můžete své zkrátit)

Některé poznámky:

• Velmi jasná komunikace o tom, co je aktuálně vybraná položka v každém aspektu (v tomto případě černá tučně vs. modrá pro odkazy)
• Skvělá čitelnost tím, že z každé položky není hypertextový odkaz, i když jsou to všechny hypertextové odkazy - v tomto případě je užitečnější upřednostnit čitelnost nad vzorem podtržení hypertextového odkazu
• Každá faseta zobrazuje, kolik výsledků je k dispozici, pokud byste na ně měli kliknout. Implementace se někdy komplikuje, záleží na vašem backendu vyhledávání.
• Správná kontrola závisí na tom, s jakým aspektem se zabýváte, a také na skvělém copywritingu a správném znění („Posledních 30 dní“ pro data, protože vám v tomto případě nezáleží na konkrétních datech atd.)
• Schopnost zvýšit o jednu úroveň výše s každým aspektem, v podstatě „zrušit“ váš výběr v tomto aspektu. Všimněte si použití < na rozdíl od červeného kříže (x) jako mnoho jiných webů.
• Zkombinujte to se strukturou navigace strouhankou, jak Amazon udělal pro další rozměr užitečnosti v případě, že lidé skenují shora dolů a nehledají v levém/pravém sloupci

Nedělejte si starosti s tím, že neuvidíte každou vybranou věc, pokud je vybráno mnoho věcí - do kterých je třeba spadnout. Uživatelé zjistí, že na stránce je více vybraných možností, pokud provedli mnoho výběrů (představte si výběr jedné z každé fasety v příkladu Amazonu). Chcete-li věci trochu vyrovnat, můžete seskupit vybrané aspekty nahoře, jak navrhuje @onnodb, i když bych je neskryl za kliknutí (jako v ovládacím prvku select).

Řekl bych, že má smysl vytvořit tento „sekundární seznam“ vybraných značek v horní části seznamu, například: (skvělý nápad, btw)

Selected tag 1   (X)
Selected tag 2   (X)
Selected tag 3   (X)
-------------------
Tag 4
Tag 5
Tag 6

Vybraným značkám přidejte jinou barvu pozadí, přidejte je k odstranění tlačítka „(X)“ a řekl bych, že pro to máte velmi použitelné uživatelské rozhraní.

Protože máte omezenou nemovitost, abyste s vámi mohli spolupracovat, můžete implementovat následující. Umístěte seznam značek do rozevíracího seznamu a tlačítko plus, které přidá další řádek s rozevíracím seznamem značek. Tímto způsobem jsou zobrazeny pouze tagy, které uživatel vybral.

Vím, že je to docela stará otázka, ale podle mého názoru stále platí pro dnešní aplikaci.

K odpovědi jsem dostal inspiraci z vertikálního posuvníku Visual Studio:

• výška posuvníku odpovídá velikosti plochy na obrazovce ve srovnání s celkovou délkou obsahu
• tenká vodorovná modrá čára ukazuje, kde je kurzor aktuálně umístěn
• tmavě žluté pruhy označují řádky, kde byl hledaný výraz nalezen

Pro otázku OP - pokud máte seznam položek, které přesahují kapacitu obrazovky, musíte použít posuvník. Pomocí posuvníku můžete zobrazit, kde jsou vybrané položky v seznamu.

Jen z temene hlavy ...

Možnost 1: Upravte atribut „title“ tak, aby se vybrané položky zobrazovaly na vznášedle. Možnost 2: Pomocí jQuery přidejte událost se vznášením pro seznam, který prochází prvkem a uvádí vybrané položky.

Existuje několik způsobů, jak toho dosáhnout:

1) Jak jste zmínili, můžete zvýraznit vybrané značky a přitom zachovat jejich pořadí v seznamu. Chcete-li překonat problém uživatelů, kteří si nejsou vědomi toho, že se vybrané stránky nezobrazují na stránce, můžete udělat něco, aby se jim to dostalo do pozornosti - něco jako blikající šipky v dolní části sekce tagů na stránce a informujte je, že něco existuje důležité, pokud posouvají dolů

=Tag1=
Tag2
Tag3
vvvv
-----------------------Screen End
Tag4
=Tag5=

Značky zvýrazněné == a vv jsou blikající šipky

2) Také si můžete vytvořit další seznam nahoře, ale odstranit značky z originálu, abyste měli vždy stejnou výšku v sekci tagů.

3) Vybrané značky můžete nechat zobrazit jako svislý seznam pod nadpisem výsledků vyhledávání.

Tag Section | Search Results:
            | xTags1 xTag2 xTag3
            |
            | [Search Results Go Here]

Všimněte si malých xs vedle každého názvu značky; to umožní uživateli rychle odebrat značky a výsledky by se měly odpovídajícím způsobem změnit.

Upřednostňoval bych možnosti 2 nebo 3. 3 Mohlo by to být lepší, protože uživatelé by mohli být trochu překvapeni, že seznam značek se mění, protože stále vybírají značky.