You may or may not need this, but it could come in handy at one point in time. So lets start..

I will show you the basics here, you may download the source at the bottom of the page.

View the DEMO

index.html

include these into the head section of the page. ajax.js is the Sack js functions. I will get into Sack later.

this goes into the head as well.

var ajax = new Array();

function getTextList(sel)

{

var color = document.getElementById('color').value; //gets value from text input

document.getElementById('colorReturn').options.length = 0;

if(color.length>0){

var index = ajax.length;

ajax[index] = new sack();

ajax[index].requestFile = 'getColor.php?color='+color; //sends the GET to the php page

ajax[index].onCompletion = function(){ createText(index) };

ajax[index].runAJAX();

}

}

function createText(index)

{

var obj = document.getElementById('colorReturn'); //retruns the options from the php page

eval(ajax[index].response);

}

The form

Filter the colors - Start typing black.

Thats it for the index page. pretty straight forward. So now for the fun part.

getColor.php – This page contains the sql and php that returns the

mysql_connect("localhost", "username", "password") or die(mysql_error());

mysql_select_db("database") or die(mysql_error());

$color = $_GET['color'];

if(isset($_GET['color'])){

$result = mysql_query("SELECT color FROM colors WHERE color LIKE '%$color%' LIMIT 0,10")

or die(mysql_error());

while($color = mysql_fetch_array( $result ))

{

echo 'obj.options[obj.options.length] = new Option("'.$color['color'].'","'.$color['color'].'");';

}

}

Its not the most detailed tutorial, but im not a tutorial guy.

View the DEMO

Download the SOURCE