It should work as follows - Please see the attached image for clarification and appearance:
- As the user types, a box will appear directly beneath the word they are currently typing containing an alphabetically sorted list of the first 10 words/phrases in the array that start with the typed letters.
- The first item in the list of matches will have it's un-typed portion inserted and highlighted. eg. If the user types in "Int" and the first suggested word is "Internet" then "ernet" will be inserted and highlighted directly after "Int".
- The user will be able to use the up and down arrow keys to move through the list and the highlighted portion of the word/phrase will change accordingly.
- Pressing the Return/Enter key will move the cursor to the end of the inserted text, thus un-highlighting it, the suggestions box will disappear and the user can continue typing.
- Alternatively the user may also press Ctrl + the number of the word they wish to use and then continue typing.
- If there are no suggestions the box will disappear.
- The user can close the suggestion box by pressing the escape key.
Code must be clear, concise and well commented. If you plan to use a library we would rather it was jQuery, but this is not essential. Please make this clear when you bid.
Appearance should be as shown in the attached image and should be changeable via CSS.