In an intranet UI, when creating or editing a news post, the user is able to attach a file to the post.
This is done by selecting the file which can be found through either:
- a file name search directly in the input field OR
- through selection from a list displaying the contents of the upload folder OR
- by uploading a new file
When editing the news post later on, the input field still displays the file name and allows for removal or replacement of the file attachment.
It is easy to find examples of search-as-you-type - the most obvious is of course Google Instant. However, a combination of search and input is harder to find - actually, I haven't found any good examples...
An initial (however, insufficient) mockup of the UI might look something like this:
The problem here is that users might interpret the dropdown button as a required part of the search process - even though, in reality, it's an alternative. We want to encourage the user to using the search-as-you-type over the select from folder feature, while preserving both options.
It probably wouldn't help much by placing the dropdown inside the input field like this:
Taking these things into consideration, my question is:
- How to best design such an input field with embedded search?
