Setting the value of an input field without refreshing the page
<p>I am trying to use AJAX to auto complete the users text. Right now I got AJAX to return the results I need for the auto complete feature to the 'suggestions' div as the user types. However, what I am trying to accomplish is a dropdown coming out of the input field ("prod-name") with suggestions as options where the user can simply click on their preferred suggestion and make it the 'value' of the input (similar to how google has search suggestions as you type, but a simplified version).</p>

<p>My markup sof far:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    function search(searchword) {
      $('#suggestion').load('invoice-get-data.php?searchword=' + searchword);
    }
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="prod-name"&gt;
    &lt;input onKeyPress="search(this.value)" type="text" id="prod-name"/&gt;
    &lt;div id="suggestion"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>My AJAX code so far (invoice-get-data.php code snippet)</p>

<pre><code>$searchword = $_GET['searchword'];

    $results = mysql_query("SELECT * FROM products WHERE prod_name LIKE '".$searchword."%'") or die(mysql_error());

    while($row = mysql_fetch_array($results)){
        echo $row['prod-name'] . '&lt;br&gt;';
    }   
</code></pre>
