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

Web 2.0 Box Generator

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

Sabbirali

2009-06-09 23:22:49

can u tell me how to remove caching in this .js file

Micah Klitgaard

2008-12-29 06:56:17

Hi! There seems to be a problem with the cache (ajax_list_cachedLists) for already searched items. E.g. if you type the letters 'abc' the request is only sent for 'ab' and not after 'c'. If you continue typing 'd' it makes an ajax request again. It is only failing periodically. When working, more than 100 records are returned for 'abc'.

Farrukh

2008-11-05 05:20:39

Hey Dude, thats a very nice work. thanks

Riyaz

2008-10-22 23:03:47

its look very good. anybody can tell me how to use this is asp.net instead of PHP

Praveen

2008-07-07 22:28:46

Hey kudos to u. Keep up the good work. All the best for your future endaevours.

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