Change Language

Ajax Downloads Home arrow Other Ajax Scripts
Free AJAX Scripts by
Ajax dynamic list - AJAX Script

This script shows you a list of options based on what you type into a text input. Example: Type in "A" and Ajax will get you a list of all contries starting with "A".



create-countries.php is used to create the countries used in this demo. Before you execute this file in your browser, remember to create a database and put in the correct data in mysql_connect() and mysql_select_db() at the top of this file

How to apply the script to a text field

You apply this script by adding an onkeyup event to an input. Example:

<input type="text" id="country" name="country" value="" onkeyup="ajax_showOptions(this,'getCountriesByLetters')">

The ajax_showOptions function takes two arguments. The first one should always be this, i.e. a reference to the text field. The second one is just a string that is sent to the file on the server. This is useful in case you are applying this feature to more than one text field. If you do, this string is something you could check on on the server(example: if "getCountriesByLetters" is set, find countries, if "getStatesByLetters" is set, get states etc.).

Javascript variables

There are 4 Javascript variables at the top of ajax-dynamic-content.js which you could modify:

var ajaxBox_offsetX = 0;
var ajaxBox_offsetY = 0;
var ajax_list_externalFile = 'ajax-list-countries.php'; // Path to external file
var minimumLettersBeforeLookup = 1; // Number of letters entered before a lookup is performed.

  • ajaxBox_offsetX = X position offset of the list
  • ajaxBox_offsetY = Y position offset of the list.
  • ajax_list_externalFile = Path to file contacted by Ajax. This is the file that outputs content back to the script.
  • minimumLettersBeforeLookup = How many letters do the user have to type in before the script search for matches


This external file outputs items back to our script. It outputs the items in the following format:


I.e.: A list where the each item is separated by a pipe(|), and ID of country and name of country is separated by ###.

Put ID into hidden form input

The basic feature of the script is to put the name of selected country into a text field. You may also want to save the ID of the country selected. You can do that by putting in a hidden form field where the ID is the same as the name of your country + '_hidden'.

<td><label for="country">Country: </label></td>
<td><input type="text" id="country" name="country" value="" onkeyup="ajax_showOptions(this,'getCountriesByLetters')">
<input type="hidden" id="country_hidden" name="country_ID"></td>

As you can see, we have a text input with name="country" and a hidden input with id="country_hidden".


Average Visitor Rating: 3.37 (Out of 5)
Number of ratings: 54

Select your rating
There are 279 free ajax scripts and 31 categories in our directory

Lost Password?
No account yet? Register
We have 11 guests online