Hello! As I promised, I’ll be explaining all the JavaScript code of the auto-complete field in this post. If you haven’t read the previous post where I talk about the auto-complete field take a moment to read it first before continuing.

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.