Home | Contact | About Me


MyTableGrid is a JavaScript based DataGrid control built on the Prototype library. It allows you to display your data in a simple and flexible way.

Autocompleter Sample


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

                        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']);
                    <?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'