Autocompleter Sample

Choose a manufacturer:  

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 create a PHP script that provides the list items

                    <?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="manufDesc">Choose a manufacturer:</label> <input type="text" id="manufDesc" name="manufDesc"><span id="ai" class="my-autocompleter-indicator" style="display:none">&nbsp;</span>

                

After that you create the autocompleter control in the following way:

                    var autocompleter = null;
                    Event.observe(document, 'dom:loaded', function() {
                        autocompleter = new MY.Autocompleter({
                            input : 'manufDesc',
                            url : 'get_manufacturers_list.php',
                            indicator : 'ai',
                            required : true,
                            initialText : 'Enter a manufacturer'
                        });
                    });