ComboBox Sample

Choose a country: 

First you have to include the javascript libraries

                <script type="text/javascript" src="../scripts/lib/prototype.js"></script>
                <script type="text/javascript" src="../scripts/lib/scriptaculous.js"></script>
                <script type="text/javascript" src="../scripts/mtg/myui.js"></script>
            

Then you define your html input as usual:

                <label for="countryDesc">Choose a country:</label> <input type="text" id="countryDesc" size="40">
            

Then you define the list of items to be displayed in the combo box

                var countryList = [
                    'Albania',
                    'Algeria',
                    'American Samoa',
                    'Argentina'
                ];
            

After that to turn the html input in the Combo box control you need to include the following code:

                Event.observe(document, 'dom:loaded', function() {
                    comboBox1 = new MY.ComboBox({
                        input: 'countryDesc',
                        items : countryList,
                        initialText : 'Select a country'
                    });
                });
            

Also you can create a combo box that retrieves the list items from database. First you create a PHP script for example:

Choose a manufacturer: 

                <?php
                    header('Content-type: application/json');

                    $con = mysql_connect("<YOUR SERVER>", "<YOUR USER>", "<YOUR PASSWORD>");

                    if (!$con)  {
                        die('Could not connect: ' . mysql_error());
                    }

                    mysql_select_db("jawdb", $con);


                    $query = 'select * from manufacturers';

                    $result = mysql_query($query);
                    $rows = array();
                    $idx = 0;

                    while($row = mysql_fetch_array($result)) {
                        $rows[$idx++] = array('value' => $row['manuf_id'], 'text' => $row['manuf_name']);
                    }
                    mysql_close($con);
                ?>
                <?php print json_encode($rows);?>
            

After that you create your html input as usual

                <label for="manufacturerDesc">Choose a manufacturer:</label> <input type="text" id="manufacturerDesc" size="40">
            

Then you include the javascript code to turn your html input in a Combo box control

                var comboBox2 = null;
                Event.observe(document, 'dom:loaded', function() {
                    comboBox2 = new MY.ComboBox({
                        input : 'manufacturerDesc',
                        url : 'get_manufacturers_list.php',
                        initialText : 'Select a manufacturer',
                        parameters : {},
                        getParameters: function() {
                            var params = {test : 'hello'};
                            return params;
                        }
                    });
                });
            

The getParameters handler is used for dynamically creates the http parameters for retrieving the data