We developed an invitation widget that autocompletes names based on who the user follows on Twitter. It is also possible to invite anybody, but I feel like this design makes it look like you 'must' choose one of the autocomplete suggestions. How would I elegantly make it obvious that suggestions aren't mandatory?
Firstly, don't auto-highlight the first option like shown in the screen cap. Then dim down the auto-suggest area when the user is just typing. If they hit the down arrow or hover over the auto-correct area, it will brighten back up to its current state. Some text could be added to give the users some instructions, but I don't think they'd be needed.
The problem isn't with your autocomplete control, it's with your form.
Check out how Trello does this.
Note that the form is titled "Add Members" and allows you to input multiple email addresses and select multiple people in the list.
The "invite" button is dimmed because there's no successful match.
Because you're still typing and haven't either selected someone by clicking on them or typed out their name in full, the "invite" button is still disabled.
Note that the input field doesn't update based on your selection.
If the system notices you entered a valid email address, it'll let you click the "invite" button too.
In other words:
Because you have a bunch of fields in rows, each doing the same thing (from what I can see from your screen grabs), you will want to handle this with an introductory message. Something along the lines of:
All fields below are optional. You may skip this step by taking the [add your action here]
Another takeaway for you, it wouldn’t be clear to me that the second text field in each row is for email addresses, and the first for searching a name/Twitter ID. I think you will likely need some labeling to make this crystal.
Don’t forget to test with some users once you have made your additions. Very important.
Similar to Mike Eng's answer, but I would put the (create new) at the top.
download bmml source – Wireframes created with Balsamiq Mockups
This is completely unambiguous.
You've got a few issues with microcopy here. First of all, as Kevin has mentioned, the text-entry fields aren't labeled. Secondly, it's unclear whether all 5 names must be filled in order to proceed (though it could be in the part of the screen you didn't share). Thirdly, your actual question can be solved with a line similar to "Choose a Twitter contact or enter a name and email for anyone else" placed next "Who will join you?".
However, I don't understand how autocomplete adds value to your users in this interaction. I suppose you intend to send invites as direct messages on Twitter but that requires the other person to follow your user and to check their DMs (usage habits here are different from email). Even if you still require an email address to be entered when inviting a Twitter contact, autocomplete neither saves time nor helps validate user-entered data because your user and the invitee may use names that are different than they are on Twitter (e.g "James Patrick Gibson" may be known as "JP Gibson" or "Jim Gibson"). Moreover, the suggestions are unhelpful because the system splits the query into separate characters & sorts the results by alphabet not by relevancy (putting "Jason" as the first result on the query "Jon" is unacceptable).
You could add the exact contents (in quotes) of the field as another line below the autocomplete options. Add a scrollbar if necessary, but the bottom (exact contents of the field) should always be shown. This gives an affordance that a custom entry is allowable.
See the Gmail "label as" autocomplete as an example.
Great suggestions so far but personally I would recommend disabling the first highlighted field (as stated before) and also cutting off the autocomplete. So like say they type 3 letters, present them a certain amount of choices up to a certain point or length and then cut off the autocomplete.
