Best way to combine Spotlight-style search with multi-tag selection

Question

I'm having a bit a "UI designer's block" with a personal extension I need to build.

I'm currently using Better Bookmark, an incredibly simple Chrome extension that gives me a query-filtered Spotlight-style popup box of folder names. Here's the extension screenshot from the Chrome Web Store:

It's simple, but incredibly effective, especially if you want to keep to the keyboard. It's great.

But it only does one folder. Chrome's Bookmark API has no internal limitation on duplicating one bookmark into multiple folders, so I want to make a new extension (using a friendlier/faster search algorithm) to bookmark to however many folders I specify. (I prefer this method over the tagging systems already out there because the tags are extension-local - uninstall the extension, byebye tags; also, not all extensions sync properly.)

The part I'm utterly and completely stuck on is how to do the UI.

Where do I put the textbox? Do I keep the items in the textbox, or should I "collect" items somewhere as I hit eg the Space key (allowing me to clear the textbox and home the cursor)? If yes, where do I show the items that I've "collected" as I type, in such a way that I only need a minimum of keystrokes to get at them to delete errors?

Some random thoughts:

• I can't use Left/Right, I need those for the textbox. So, horizontal navigation is out.

• If I keep all the folders as a single string in the textbox, I slowly move rightwards across the screen as I type, so the point where the list entries line up and my editing reference drifts; it's no longer directly in line. Also, I potentially create ambiguity issues if I accidentally hit Enter on a partial entry.

• I could put collected folders at the top, the textbox maybe 2/5 of the way down, then the list in the remainder, but I can't think of an intuitive single keystroke to jump into the list of collected items; I can only think of UpUpUpUpUpUpUp to arrow up the list of selections and into the collected list - and then I need to go DownDownDownDownDown once I'm done.

• I thought of putting the collected items at the bottom, but this feels somehow... wrong. I'm not sure why.

There are probably a few things I haven't thought of, but this is what I remember of my mental notes thus far (I've been pondering about this for a couple days, finally decided help would be a good idea :P).

Answer 1

Tim Schlechter solved the "tag input UX problem" pretty good with his Bootstrap Tags Input Project.
It collects the tags in the input box (not actually but it looks like that). It allows efficient usage with the keyboard. Check it out!

It works like that: You have a div with the tags and a text input inside.

If the text input is empty you can:

• move it with the arrow keys
• remove the tag before it with backspace
• remove the tag after it with delete

There are only two drawbacks of his implementation:

1. You can't click between two tags to edit there.
2. You can't move tags.

 

The thing is that this isn't as compact as the popover on your screen but it should give you an idea.