Download Ajax dynamic list

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Download files

You can download the entire script from this Zip file.

Files included in package

ajax-dynamic-list.html = Main HTML file
js/ajax-dynamic-list.js = Main JS file
js/ajax.js = Ajax (SACK Library)
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

Setup

create-countries.php

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:

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

ajax_list_externalFile(ajax-list-countries.php)

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

1###Namibia|2###Nauru|3###Nepal|4###Netherlands

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

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

Css

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

/* 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 */
  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;
}

Update log

June, 20th, 2006: Fixed a problem in the cache and use of lowercase and uppercase letters.
June, 12th, 2006: Fixed problem searching for strings with spaces. The fix is implemented in ajax-list-countries.php.
May, 22nd, 2006: Fixed problem with some special characters. Changes applied to ajax-dynamic-list.js.
April, 19th, 2006: Added support for putting ID into hidden form inputs.