Text Box that Dynamically Generates Scroll Box of Results as you type

[ashburnham]

We have this bit of code on our site that creates a drop down list of occupations/trades from a database for a customer to select from...

 

<?

echo "<table><tr><td class='main'>Trade:</td><td><select name='trade'>";

mysql_connect ("XXX", "XXX", "XXX") or die( "Unable to connect to database");
mysql_select_db("XXX") or die( "Unable to select  database");
$query="SELECT * FROM table ORDER BY `trade` ASC ";
$result=mysql_query($query);
$num=mysql_numrows($result);
mysql_close();
$i=0;
while ($i < $num) {
$trade=mysql_result($result,$i,"trade");
$jobs = "$jobs<option value='$trade'>$trade\n";
$i++;
}

echo "<option value='none' SELECTED='selected'>Please select a trade\n$jobs</select><br></td></tr></table>";

?>

 

This list is forever growing and the list has reached a stage where I need to make changes.

 

What I propose is a text box for the customer to type into and as they begin to type into the box a scroll box appears with trades that fulfil the criteria.  The scroll box becoming shorter as they continue to type as the trade is being narrowed down.

 

The second part of this trade search is that when the customer clicks the trade on the scroll box, the full trade name transfers into the text box and the scroll box disappears (unless they begin editing the text box in which case the process is repeated.

 

Any ideas on this as my head is really not working today!!!

[simshaun]

What you are referring to is called autocomplete.  There are many tutorials and plugins that you can use scattered throughout the web.  Run a Google search and you will find what you need.  I use a jQuery plugin from Jorn called "autocomplete". Take a look

[ashburnham]

The example in the link seems to be basically what I want.  I'm a bit of a noob in programming terms and looks a little confusing how it all works but I will have a play and see what happens.

 

Thanks