Next Prev

Dhtml Autocomplete

Read more and download "Dhtml Autocomplete"

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 http://twilightuniverse.com/projects/sack)
* 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

Visit PhpDaddy.com

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://www.ajaxdaddy.com/ajax/dhtml-autocomplete/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
	<title>Ajax - dynamic list</title>
	
	<style type="text/css">
	
	/* START CSS NEEDED ONLY IN DEMO */
	
	#mainContainer{
		width:660px;
		margin:0 auto;
		text-align:left;
		height:100%;
		
		border-left:3px double #000;
		border-right:3px double #000;
	}
	#formContent{
		padding:5px;
	}
	/* END CSS ONLY NEEDED IN DEMO */
	
	
	/* Big box with list of options */
	#ajax_listOfOptions{
		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 */
    color: black;
		text-align:left;
		font-size:0.9em;
		z-index:100;
	}
	#ajax_listOfOptions div{	/* General rule for both .optionDiv and .optionDivSelected */
		margin:1px;		
		padding:1px;
		cursor:pointer;
		font-size:0.9em;
	}
	#ajax_listOfOptions .optionDiv{	/* Div for each item in list */
		
	}
	#ajax_listOfOptions .optionDivSelected{ /* Selected item in the list */
		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"><!-- THE ID OF the country will be inserted into this hidden input --></td>
				</tr>	

			</table>		
			<p>Type in something in the textfield "country" or "country2"</p>
		</fieldset>	
		</form>
  </center>


</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Arti Ajans Hosting

2008-04-07 19:35:25

thanks you very gooooooood..

Babu

2007-09-26 12:06:20

Hi!, can we use a jsp file or directly an XML file containing the list of countries, instead of using the php file (create-countries.php)? Also, how can the base tag on the html () be eleminated? Thanks, Babu (anandbabu_aj@yahoo.com)

Kishore

2007-08-17 06:56:50

Hi its really looks cool.....I'm juz confused on how to get that one working from my end...coz I am basically a java developer ...so how could I go about ur code.... Once again looks really cool ajax functionality which u have given.. Plz lemme know any alternative for my query

Mike

2007-06-29 22:01:03

it's working fine

Eleonora

2007-06-29 14:34:40

very good

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Dhtml Autocomplete

Comment on this example