I need a simple webpage that does the following.
Further information is attached in the zip file.
Part 1 is of the challenge is what I need to get done.
Create a file '[login to view URL]' that contains:
A single-line text input field named "input"
A submit button
An empty labeled "Matches:"
Your solution may also use additional files (images, JavaScript, CSS, etc.), but all assets used in the solution must have been created by you (see exception below). This question is designed to test programming ability, not design skills, but feel free to apply useful styling to your solution. Your HTML should pass the validation tests at [login to view URL]
In addition to the files you create, you may include and use the latest version of jQuery from this url: [login to view URL] You may not use any other 3rd party plugins or libraries.
The application 'AlpcServer' provided as part of this challenge implements a simple word-completer. Assuming that this application is running on your local machine at port 8080, when the URL
http://localhost:8080/words/a
is accessed, the server will return a list of words it knows starting with that letter and report HTTP status of 200 (OK). Accessing /words/ac will return a list of words beginning with the stem 'ac', and so on. If the word stem parameter is missing or if the server knows no words beginning with that stem, the server will return an HTTP status of 204 (No content), and no data.
The edit field on the [login to view URL] file must operate in two different modes:
Normal Mode operates as a plain edit field; when the control has focus, characters typed are displayed in the control. If the user presses '^' as the first thing in the edit box or after whitespace, the control switches into autocomplete mode. The '^' character that switches your page into autocomplete mode should not be displayed in the edit field.
Autocomplete Mode captures input from the keyboard and queries the AlpcServer for words starting with letters typed after entering autocomplete mode. For each character typed in autocomplete mode, the following should happen:
The server should be queried asynchronously for matching words
If one or more matches are returned, the 'Matches' div should be populated with the results, one entry per line, and the edit field should be updated to include the best match (the first match in the list returned from the server) so far.
If the user presses the backspace key while in autocomplete mode, your web page should re-display the matches that result from the shorter stem, or if the user backspaces past the first letter entered in autocomplete mode, should return to normal mode. Users should be able to switch between Normal and Autocomplete modes to enter multiple words in the edit field.
Autocomplete mode is exited when the user does any of these:
enters text that results in zero matches being returned
hits the Tab key, which accepts the current best match from the completer, completing the word in the edit box
clicks on one of the words displayed in the 'Matches' div, completing the word in the edit box
presses space bar
presses the Submit button
backspaces past the point where autocomplete mode was triggered
When Autocomplete mode is exited, any contents in the 'Matches' div are removed.