Meilleure façon de combiner la recherche de style Spotlight avec la sélection de plusieurs balises

Question

J'ai un peu un "bloc de conception d'interface utilisateur" avec une extension personnelle que je dois construire.

J'utilise actuellement Better Bookmark , une extension incroyablement simple Chrome extension qui me donne une boîte contextuelle de style Spotlight filtrée par requête de noms de dossiers. Voici la capture d'écran de l'extension de le Chrome Web Store:

C'est simple, mais incroyablement efficace, surtout si vous voulez vous en tenir au clavier. C'est bien.

Mais il ne fait qu'un dossier. L'API Bookmark de Chrome n'a pas de limitation interne sur la duplication d'un signet dans plusieurs dossiers, donc je veux créer une nouvelle extension (en utilisant un algorithme de recherche plus convivial/plus rapide) pour ajouter un signet au nombre de dossiers que je spécifie. (Je préfère cette méthode aux systèmes de balisage déjà disponibles, car les balises sont locales à l'extension - désinstallez les balises d'extension, byebye; également, toutes les extensions ne se synchronisent pas correctement.)

La partie sur laquelle je suis complètement et complètement coincé est de savoir comment faire l'interface utilisateur.

Où dois-je mettre la zone de texte? Dois-je conserver les éléments dans la zone de texte, ou dois-je "collecter" des éléments quelque part lorsque j'appuie par exemple sur la touche Espace (me permettant d'effacer la zone de texte et de positionner le curseur)? Si oui, où dois-je afficher les éléments que j'ai "collectés" au fur et à mesure que je tape, de telle manière que je n'ai besoin que d'un minimum de touches pour y accéder pour supprimer les erreurs?

Quelques pensées aléatoires:

Je ne peux pas utiliser Gauche/Droite, j'en ai besoin pour la zone de texte. La navigation horizontale est donc supprimée.
Si je garde tous les dossiers comme une seule chaîne dans la zone de texte, je me déplace lentement vers la droite sur l'écran pendant que je tape, de sorte que le point où les entrées de la liste s'alignent et ma référence de modification dérive; ce n'est plus directement en ligne. De plus, je crée potentiellement des problèmes d'ambiguïté si je frappe accidentellement Entrée sur une entrée partielle.
Je pourrais mettre les dossiers collectés en haut, la zone de texte peut-être 2/5 en bas, puis la liste dans le reste, mais je ne peux pas penser à une seule touche intuitive pour sauter dans la liste des éléments collectés; Je ne peux penser qu'à UpUpUpUpUpUpUp pour faire remonter la liste des sélections et dans la liste collectée - puis je dois aller DownDownDownDownDown une fois que j'ai terminé.
J'ai pensé à mettre les éléments collectés au fond, mais cela semble en quelque sorte ... mal. Je ne sais pas pourquoi.

Il y a probablement quelques choses auxquelles je n'ai pas pensé, mais c'est ce dont je me souviens de mes notes mentales jusqu'à présent (j'y réfléchis depuis quelques jours, j'ai finalement décidé que l'aide serait une bonne idée: P).

Larivact · Answer

Tim Schlechter a résolu assez bien le "problème UX d'entrée de balises" avec son Bootstrap Tags Input Project.
Il recueille les balises dans la zone de saisie (pas réellement mais cela ressemble à ça). Il permet une utilisation efficace avec le clavier. Vérifiez-le!

Cela fonctionne comme ça: vous avez un div avec les balises et une entrée de texte à l'intérieur.

Si la saisie de texte est vide, vous pouvez:

déplacez-le avec les touches fléchées
supprimer la balise avant avec retour arrière
supprimer la balise après avec supprimer

Il n'y a que deux inconvénients à sa mise en œuvre:

Vous ne pouvez pas cliquer entre deux balises pour y apporter des modifications.
Vous ne pouvez pas déplacer de balises.

Le fait est que ce n'est pas aussi compact que le popover sur votre écran mais cela devrait vous donner une idée.