I like It! 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

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 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 server.com/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;
}