To create a dynamic text field form that will search through an array of names and corresponding mobile numbers and display any partial matches in a drop-down list. Upon selecting an item from the list it will auto-complete the partially typed entry. The field will allow for multiple entries and can auto-complete for each additional entry. The functionality is similar to Google's Gmail or Yahoo Mail's compose fields.
Only a HTML form with one text field, it’s functionality and simple UI of the drop-down field is to be designed.
There will be two case functionalities for this form field.
Case 1: The normal functionality will allow the user to choose items from the drop-down list as well as manually inputting other phone numbers into the field.
Case 2: A special case where only the items from the drop-down list can be selected. The user cannot input any name or number that does not match what is available from the drop-down list.
The functionality for both cases can be either be in separate scripts or a combined script.
The items in the drop-down list can be selected by either by the choosing the item with a click of the mouse or by using the Up/Down arrow keys and pressing Enter/Return.
The search field will allow for multiple entries and searches for each entry.
Once the name/number has been selected, it will auto-complete the text field. The auto-completion will separate each entry with a comma and a space. (ie. David Smith , Janet Smith )
If the user moves the focus away from the field, any additional trailing commas will be removed.
No validation is needed as it will be handled server-side.
The design of the drop-down should be designed with XHTML/CSS and allow for background-color and font formatting within the CSS. Only simple highlighting of the partially matched text and mouse over state needs to designed (See attached example).