Now take some cookies because the post is quite long. Be comfortable and let’s start!
First lets define how our auto-complete field should work. We want an input field that will present suggestions obtained by Ajax in a box below it when we type some text. Then we should be able to navigate through the suggestions by using the UP and DOWN arrow keys and select one by pressing ENTER/RETURN. Additionally we should be able to select a suggestion by clicking on it with the mouse. After selecting a suggestion, the text of the input field should be updated and the suggestion box should disappear. But if we hit the ESC key instead, the suggestion box should disappear without updating the value of the input field.
Now we can start coding. But before we define some global variables. We’ll discuss about them at the appropriated time.