Chained Select (DHTMLSuite.autoComplete)

DHTML Suite - article index

Specifications

• Widget/Class name: DHTMLSuite.autoComplete
• Demo: demo-chained-select.html

Configuration

To use this script, include the contextMenu widget with lines like this:

<div>
select a county : <input type="text" id="country">
<br><br><br>
select a city : <input type="text" id="city">
</div>


<script type="text/javascript">
autoCom = new DHTMLSuite.autoComplete();
autoCom.add('country','includes/ajax-list-countries.php');
autoCom.add('city','includes/ajax-list-cities.php');
</script>

This is an example how the ajax-list-cities file will look like:

<?

$string = "Los Angeles,
Houston,
London,
Paris,
Oslo,
Stavanger,
Haugesund,
Cairo,
Beijing,
Tokyo,
Kobe,
Lyon,
Nice,
Barcelona,
Madrid,
Manchester,
Liverpool,
Bergen,
Mexico City,
Copenhagen,
Stockholm,
Brussel,
Amsterdam,
Wien,
Bern,
Geneve,
New York";


$arr = explode(",", $string);
$pattern = "/^" .$_GET['letters']. "/i";

foreach ($arr as $key => $value) {    
   $value = trim($value);
   if ( preg_match($pattern,$value)) echo $key."###".$value."|";    

}    
?>

This is just a demo example. You can also use a database for this. Example of query:

$sql = "select * from cities where cityName like '$letters%'";