Javascript: autocomplete country script

We are all filling registration forms. It's really nice when the page helps us to do that faster. The script, that I'm going to show you, is designed to be used for a country field.

The result of the script could be seen here. You can download the source files from here

Step 1 - Preparing the HTML

What we need is just a text field. When the user starts typing there our script should suggest all the possible countries that contain the entered symbols.


Step 2 - Preparing the CSS

Of course we have to add some CSS to make things look better. Please notice the "helper" object. That's the div that will conain the countries that match the entered symbols by the user. The div has to be with absolute position so we can place it exactly below the text field.


Step 3 - Writing the main structure of our JavaScript class

As you can see there are several variables that we will need.

• minChars - the number of symbols that are required to show the countries' links.


• field - it will be a reference to the text field.


• countryLoopId - we will need this for our loop function. I'll explain about it later.


• helper - it will be a reference to the div that contains the links.


• helperContent - it will contain the html string that will be send to the helper's div.

The class includes also a method called "init". That's the initial function of our class. It accepts the ID of the text field and checks if there is such element. If not, then it shows a message. After the definition of the class we are creating an instance of it. Also there is a global variable (an array) that contains the names of the countries. It's too long to paste it here, but you can find the complete list in the source files.



Step 4 - Starting the process

To start the process we have to pass the field's ID to the JavaScript class, so it can use the field's data.


Step 5 - Start the loop function

We need a loop function that has to check the field's data and compare it with the names of the countries. We have to start this function when the user is in the field and stop it when the user leaves the field. That's why we add two additional functions - onFieldIn and onFieldOut. The loop effect is made with setTimeout function. To stop it we will use clearTimeout function. As you can see in the body of the loop method we are composing the html string that comprises the neccessary countries' links.


Step 6 - Creating the helper's div

So, now we can access the text field in the loop function. We can get the data from it and find which countries to show. We only need a div that will be shown below the text field and will have the links. I also added functions for showing, hiding and positioning the div. (Add these functions in the class's prototype)


Step 7 - Showing the helper's div and filling the text field

First of all we have to call the "createHelper" function. We can do that in the "init" method. After that in the loop we will just check if the composed string is empty and if it is not we will fill the div. Maybe you noticed that the created link for every country is calling a javascript function from our class - setCountry. You can find it below, it simply changes the value of the text field.



Check the result of the script here. You can download the source files from here