Auto-Suggest Text Box
<p>I found an example online that shows how to build a auto-suggest text field by using javascript and PHP. Originally I started out by building my on version of the example, but after many failed attempts in getting it to work, I decided to see if the example itself even worked. I copied and pasted the example, changing only the database connection and the information regarding the database table. To my surprise the example still doesn't work! In my database I have a a table called <code>Device</code> and in that table there are three columns, <code>ID</code>,<code>Device_type</code>, and <code>Price</code>. Right now I have one value in the table and it's <code>Apple iPhone 6</code> in the <code>Device_type</code> column, so when the program is working correctly, it should start to auto suggest <code>Apple iPhone 6</code> as soon as I type "A" into the text box. Unfortunately, that doesn't happen, a dropdown box appears, as it should, but the box is blank and doesn't show any suggestions.</p>

<pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
        &lt;title&gt;List Suggestion Example&lt;/title&gt;
        &lt;style type="text/css"&gt;
            &lt;!--
            div.suggestions {
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                border: 1px solid black;
                text-align: left;
            }
            --&gt;
        &lt;/style&gt;
        &lt;script type="text/javascript"&gt;
            var nameArray = null;
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onclick="document.getElementById('divSuggestions').style.visibility='hidden'"&gt;
        &lt;?php
        mysql_connect("hostname", "username", "password") OR DIE ('Unable to connect to database! Please try again later.');
        mysql_select_db('DeviceRecycling');
        $query = 'SELECT Device_type FROM Device';
        $result = mysql_query($query);
        $counter = 0;
        echo("&lt;script type='text/javascript'&gt;");
        echo("this.nameArray = new Array();");
        if($result) {
            while($row = mysql_fetch_array($result)) {
                echo("this.nameArray[" . $counter . "] = '" . $row['Device_type'] . "';");
                $counter += 1;
            }
        }
        echo("&lt;/script&gt;");
        ?&gt;
        &lt;!-- --------------------- Input Box --------------------- --&gt;
        &lt;table border="0" cellpadding="0" width="50%" align="center"&gt;
            &lt;tbody align="center"&gt;
                &lt;tr align="center"&gt;
                    &lt;td align="left"&gt;
                        &lt;input type="text" id="txtSearch" name="txtSearch" value="" style="width: 50%; margin-top: 150px; background-color: purple; color: white; height: 50px; padding-left: 10px; padding-right: 5px; font-size: larger;" onkeyup="doSuggestionBox(this.value);" /&gt;
                        &lt;input type="button" value="Google It!" name="btnGoogleIt" style="margin-top: 150px; background-color: purple; color: white; height: 50px; font-size: larger;" onclick="window.location='http://www.google.com/#hl=en&amp;source=hp&amp;q=' + document.getElementById('txtSearch').value" /&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr align="center"&gt;
                    &lt;td align="left"&gt;
                        &lt;div class="suggestions" id="divSuggestions" style="visibility: hidden; width: 50%; margin-top: -1px; background-color: purple; color: white; height: 250px; padding-left: 10px; padding-right: 5px; font-size: larger;" &gt;
                        &lt;/div&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;

        &lt;script type="text/javascript"&gt;
            function doSuggestionBox(text) { // function that takes the text box's inputted text as an argument
                var input = text; // store inputed text as variable for later manipulation
                // determine whether to display suggestion box or not
                if (input == "") {
                    document.getElementById('divSuggestions').style.visibility = 'hidden'; // hides the suggestion box
                } else {
                    document.getElementById('divSuggestions').style.visibility = 'visible'; // shows the suggestion box
                    doSuggestions(text);
                }
            }
            function outClick() {
                document.getElementById('divSuggestions').style.visibility = 'hidden';
            }
            function doSelection(text) {
                var selection = text;
                document.getElementById('divSuggestions').style.visibility = 'hidden'; // hides the suggestion box
                document.getElementById("txtSearch").value = selection;
            }
            function changeBG(obj) {
                element = document.getElementById(obj);
                oldColor = element.style.backgroundColor;
                if (oldColor == "purple" || oldColor == "") {
                    element.style.background = "white";
                    element.style.color = "purple";
                    element.style.cursor = "pointer";
                } else {
                    element.style.background = "purple";
                    element.style.color = "white";
                    element.style.cursor = "default";
                }
            }
            function doSuggestions(text) {
                var input = text;
                var inputLength = input.toString().length;
                var code = "";
                var counter = 0;
                while(counter &lt; this.nameArray.length) {
                    var x = this.nameArray[counter]; // avoids retyping this code a bunch of times
                    if(x.substr(0, inputLength).toLowerCase() == input.toLowerCase()) {
                        code += "&lt;div id='" + x + "'onmouseover='changeBG(this.id);' onMouseOut='changeBG(this.id);' onclick='doSelection(this.innerHTML)'&gt;" + x + "&lt;/div&gt;";
                    }
                    counter += 1;
                }
                if(code == "") {
                    outClick();
                }
                document.getElementById('divSuggestions').innerHTML = code;
                document.getElementById('divSuggestions').style.overflow='auto';
            }
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>In my attempt to trouble shoot, I have discovered a few things. First off the connection string to the database is good, and that is not the problem. In an attempt to further check whether it was the database query that was causing issues, I have discovered that if I remove the <code>echo("&lt;script type='text/javascript'&gt;")</code> from the PHP portion of the code, that it will actually print <code>Apple iPhone 6</code> at the top of the page, which tells me the query itself is actually working. Obviously though, by removing the javascript tag the program still doesn't work because it should only be displaying the results as you type something that matches what is in the database. </p>