Download Ajax dynamic list

Demo

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:

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

Comments

1 2 3 4 5

Thanks :)

saurabharaiyer at 11:02AM, 2011/03/20.

1 2 3 4 5

Good Script

pandurang at 03:24PM, 2011/04/07.

1 2 3 4 5

Really good script have been using it for years now. Just recently I noticed a bug in the script. It is when you look up data containing an ampersand "&" character. Once you type in the ampersand that character and all the rest after gets dropped.

Any ideas?

gerko jansen at 06:11PM, 2011/04/20.

1 2 3 4 5

gerko jansen,
it looks like the script doesn't do URL encoding of the data it picks from the text field - it only replaces the ' ' (space) character. This is why the '&' character cuts everything off (since it is a GET request, and parameters in URL suppose to be separated with '&' character).
--Alexandre

Alexandre at 05:39AM, 2011/04/26.

1 2 3 4 5

Also. Doesn't work in Opera when response from external file contains cyrillic symbols. But all OK in IE 6 and IE 8 (this is strange ofcourse ;)). Advice for them who works with cyrillic charset. You need to add to ajax-list-countries.php file this line "header("Content-Type: text/html; charset=windows-1251");"

Peter Lando at 06:06PM, 2011/05/23.

1 2 3 4 5

Great script, very handy to learn from.

Potential for a bug:

In ajax_showOptions(), it calls ajax_option_list_buildList(inputObj.value,paramToExternalFile,currentListIndex);

but ajax_option_list_buildList() only requires 2 args.

It's rather minor, but thought I'd bring it up as it caught me out when I added an extra argument to ajax_option_list_buildList()

Thanks

JS at 06:02AM, 2011/05/30.

1 2 3 4 5

Thanks for the script. Actually...i need the id when i select the desired country from the dropdown list....which actually goes into my database. How to?

somit at 12:26PM, 2011/06/20.

1 2 3 4 5

how can I reuse the code which different countries php file?
For example, I have drop down country already, but on chain-input, I want the second input for city base on country I select before. How can I do that? Thanks

bob vu at 04:54PM, 2011/08/17.

1 2 3 4 5

Hi,
Can I pass two or three parameters to my Extarenal file (ajax-list-countries.php in above example)? My list of countries will depend on other parameters also.

Deep at 09:57AM, 2011/08/18.

1 2 3 4 5

Thanks for the script.

To pass the additional parameters you just have to adjust the url ajax uses to access the .php file. It's in the bottom of the ajax_showOptions function.

ChaosD at 02:31PM, 2011/09/06.

1 2 3 4 5

Hi,
I want add processing.gif while processing going on. After processing completes i want to add clear.gif How to do it with this script.
can any body have an idea. if any body can done, pls help me i am new to javascript.

seshagiri rao at 06:02PM, 2011/09/13.

1 2 3 4 5

Hi,
I want add on input field processing.gif while processing going on. After processing completes i want to add clear.gif on input field.How to do it with this script.
can any body have an idea. if any body can done, pls help me i am new to javascript.

seshagiri rao at 06:04PM, 2011/09/13.

1 2 3 4 5

<a href="#comment904">seshagiri rao wrote:</a>
Hi,
I want add on input field processing.gif while processing going on. After processing completes i want to add on same input field clear.gif to clear selected value from suggesion. How to do it with this script.
can any body have an idea. if any body can done, pls help me i am new to javascript.

seshagiri rao at 06:42PM, 2011/09/13.

1 2 3 4 5

To add a loader gif, edit the file ajax_dynamic_list.js . At around line 284 where there is a line:

ajax_list_objects[ajaxIndex].requestFile = url; // Specifying which file to get

insert the following line before it:

inputObj.className += ' looking';

This adds a class 'looking' to the input field when the ajax call is made.

Add the following function at the bottom of the file:

function removeLoader() {
if(typeof window.theInputObj !== 'undefined') {
window.theInputObj.className = theInputObj.className.replace( /(?:^|\s)looking(?!\S)/ , '' );
}
}

This function will be called to remove the class 'looking' from the input field.

At the top of the function ajax_showOptions at around line 207 insert the following line:

window.theInputObj = inputObj;

This defines the input field as a global variable for the removeLoader function to find.

Around line 287 modify the line:

ajax_list_objects[ajaxIndex].onCompletion = function(){ ajax_option_list_showContent(ajaxIndex,inputObj,paramToExternalFile,tmpIndex); };

to read:

ajax_list_objects[ajaxIndex].onCompletion = function(){ ajax_option_list_showContent(ajaxIndex,inputObj,paramToExternalFile,tmpIndex);
removeLoader(); };

This adds a call to the removeLoader function when the ajax lookup has completed.

Around line 329 at the beginning of the autoHide function add the following:

removeLoader();

This calls the removeLoader function when the list is hidden.

Finally upload a loader.gif file to your images and then create a CSS rule for the 'loading' class, i.e.:

.loading {
background-image:url(images/loader.gif);
background-repeat:no-repeat;
background-position:right center;
}

Sorry all you Javascript experts. There may be a more elegant way to do this but it works for me.

Barry at 01:02PM, 2011/10/01.

1 2 3 4 5

ajax-dynamic-list not worcking with unicode my lan persian

ali at 07:26PM, 2011/10/01.

1 2 3 4 5

Hi Every one...

I want to show dynamic list separated by some symbol.

(Ex..) In country list if i selected India after that if i press some symbol again i should show list..


Thanks in advance..

Guru at 04:25PM, 2011/10/05.

1 2 3 4 5

its nice and helpful..thnxxxx

Lakhan singh at 08:18AM, 2011/10/26.

1 2 3 4 5

The script is working fine; I'm using it to look up NDCs. What parameters would I change to allow for more entries to show in the list.

Lewis Miller at 10:08PM, 2011/10/27.

1 2 3 4 5

Hi,
this is useful, but i have some error in dynamic update using php mysql with scroll(Ex:tweeter news tricker).

Thanks
Bala

bala at 02:18PM, 2011/11/13.

1 2 3 4 5

great script, ty
Is there any way to make the form submit itself after a selection has been made ? - e.g without the use of a submit button.

arty at 01:05AM, 2011/11/14.

1 2 3 4 5

HI again...
the scripts work great on windows 2003 server but when I use exactly the same scripts on windows 2008 server the first selection from the drop down doesnt seem to work when the form is submitted...

any ideas ?

arty at 11:02PM, 2011/11/15.

1 2 3 4 5

forget the last comment about windows 2003 / 2008 server, have tested it again and all is fine.

arty at 11:09PM, 2011/11/15.

1 2 3 4 5

hii sir great code but i m still in problem how can I reuse the code to see the chain-input
For example if i select the country from the 1stdrop down menu then I want the second input for state, base on country I select before in second drop down box then when i select the State from the 2nd drop down menu then I want the third input for city, base on state I select before in second drop down box then when i select the city from the 3rd drop down menu then I want the 4th input for location, base on city I select before in third drop down box then How can I do that? plz help me i need code on urgent basis plz help me Thanks

raj at 07:49PM, 2012/01/02.

1 2 3 4 5

If you want to spruce up your vanilla webapp or site but don't want the bother of adopting a full framework, you may want to look at the Javascript/ AJAX library site DHTML Goodies. What do they have? A folder tree with drang and drop, several image slideshows, ajax tooltip widgets. An Ajaz blindfold chess trainer, Automatic left hand new based on page content.


<a href=“http://marketbold.com/KeywordSniperPro/”>Keyword Tool</a>

Jackey Worden at 06:16AM, 2012/01/21.

1 2 3 4 5

I can't seem to get it to work with flash form...Any ideas?

Tom at 11:08PM, 2012/01/31.

1 2 3 4 5

I need the onchange event to fire when an item is selected from the ajax drop-down.

James Calfee at 09:14PM, 2012/02/07.

1 2 3 4 5

Hy, I'm beginner with Ajax and PHP, so I need little help. How can I show on this list 2 variables, for example Name and Surname, like John Smith. I don't know what part of code I need to expand for one more variable. (because this is an example with just one - countries). I took these two variables from database but I don't know how to present it on webpage, I suppose I need to do something with Ajax..please help!

Mark at 03:37PM, 2012/02/09.

1 2 3 4 5

just replace & to %26 it will work
for example
$search=~s/&/%26/g

VEL at 01:02PM, 2012/02/15.

1 2 3 4 5

Hi, thanks for such an incredibly useful script!

I have adapted it to go to a specific product page on clicking an item.

What I'm looking to do, is add a small thumbnail image based on the product ID before each result item.

I just need some pointers as to where I need to insert the <img> code.

Any help will be much appreciated!

Phil

Phil at 06:42PM, 2012/04/07.

1 2 3 4 5

Hi,

This script has been working out for me for a long time. Thanks and Good job!!

I have come across one issue which i can't seem to solve.
To make sure no duplicates are being inserted i need an alert() box to pop up if you choose something which is shown in the list.
I have spent many hours but can't find the way to do this.
Any help would be much appriciated!

Leo at 10:33PM, 2012/05/30.

1 2 3 4 5

<a href="#comment964">Barry wrote:</a>
To add a loader gif, edit the file ajax_dynamic_list.js . At around line 284 where there is a line:

ajax_list_objects[ajaxIndex].requestFile = url; // Specifying which file to get

insert the following line before it:

inputObj.className += ' looking';

This adds a class 'looking' to the input field when the ajax call is made.

Add the following function at the bottom of the file:

function removeLoader() {
if(typeof window.theInputObj !== 'undefined') {
window.theInputObj.className = theInputObj.className.replace( /(?:^|\s)looking(?!\S)/ , '' );
}
}

This function will be called to remove the class 'looking' from the input field.

At the top of the function ajax_showOptions at around line 207 insert the following line:

window.theInputObj = inputObj;

This defines the input field as a global variable for the removeLoader function to find.

Around line 287 modify the line:

ajax_list_objects[ajaxIndex].onCompletion = function(){ ajax_option_list_showContent(ajaxIndex,inputObj,paramToExternalFile,tmpIndex); };

to read:

ajax_list_objects[ajaxIndex].onCompletion = function(){ ajax_option_list_showContent(ajaxIndex,inputObj,paramToExternalFile,tmpIndex);
removeLoader(); };

This adds a call to the removeLoader function when the ajax lookup has completed.

Around line 329 at the beginning of the autoHide function add the following:

removeLoader();

This calls the removeLoader function when the list is hidden.

Finally upload a loader.gif file to your images and then create a CSS rule for the 'loading' class, i.e.:

.loading {
background-image:url(images/loader.gif);
background-repeat:no-repeat;
background-position:right center;
}

Sorry all you Javascript experts. There may be a more elegant way to do this but it works for me.

//////////////////////////////////////
replace ".loading" by ".looking" othewise script will not be working

KS at 04:10PM, 2013/03/14.

Post your comment

Your name:
Your email:
Your website:
Don't have an avatar? Create one at Gravatar.com.

 

Confirmation code:

Please wait...

Comment preview:

Type some text to see comment preview...

Anonymous at 23:31, 05-23-2013.