Top Menu

ajax scripts script web 2.0 dhtml javascript

Main Menu



Category: Ajax DHTML /  Dhtml Autocomplete Examples

Dhtml Autocomplete

ajax, ajax demos,javascript demos, web 2.0, web 2.0 demos

Files included in package

  • ajax-dynamic-list.html = Main HTML file
  • js/ajax-dynamic-list.js = Main JS file
  • js/ajax.js = Ajax (Library from
  • create-countries.php = PHP file which creates a database table for the demo
  • ajax-list-countries = Ajax contacts this file from the script. This file outputs a list of countries
See Demo and Download Dhtml Autocomplete Examples



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 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',event)">

The ajax_showOptions function takes three 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 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.). The last argument is always event.

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".


This is the css for the script. It is needed in order for the script to work properly.

/* Big box with list of options */
  position:absolute;  /* Never change this one */
  width:175px;  /* Width of box */
  height:250px;  /* Height of box */
  overflow:auto;  /* Scrolling features */
  border:1px solid #317082;  /* Dark green border */
  background-color:#FFF;  /* White background color */
#ajax_listOfOptions div{  /* General rule for both .optionDiv and .optionDivSelected */
#ajax_listOfOptions .optionDiv{  /* Div for each item in list */
#ajax_listOfOptions .optionDivSelected{ /* Selected item in the list */

Hit: 6907.

Write Review