AJAX DHTML Auto complete Example

In this example we create these files

ajax-autocomplete.html = Main HTML file, the source code is below.
js/ajax-autocomplete.js = Main JavaScript File.
js/ajax.js = Ajax (Library).
countries.php = PHP file which creates a database table for the example.
ajax-countries-list = Ajax contacts this file from the script. This file outputs a list of countries.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Ajax - Auto complete Example</title>

#ajax_listOfOptions{

position:absolute;

width:175px;

height:250px;

overflow:auto;

border:1px solid #317082;

background-color:#FFF; 

color: black;

text-align:left;

font-size:0.9em;

z-index:100;

}

#ajax_listOfOptions div{ 

margin:1px;

padding:1px;

cursor:pointer;

font-size:0.9em;

}

#ajax_listOfOptions .optionDiv{ 



}

#ajax_listOfOptions .optionDivSelected{ 

background-color:#317082;

color:#FFF;

}

#ajax_listOfOptions_iframe{

background-color:#F00;

position:absolute;

z-index:5;

}



form{

display:inline;

}

</style>

</head>

<body>

<script type="text/javascript" src="javascript/ajax.js"></script>

<script type="text/javascript" src="javascript/ajax-dynamic-list.js"></script>

<center>

<form>

<fieldset>

<legend>AJAX(Asyncron Javascript And XML) - list options</legend>

<table border="0">

<tr>

<td><label for="country">Country: </label></td>

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

<input type="hidden" id="country_hidden" name="country_ID"></td>

</tr>



</table>

<p>Type something in the textfield</p>

</fieldset>

</form>

</center>





</body>

</html>