jQuery autocomplete from PHP mySQL query displaying improperly - php

Question

I am using this autocomplete tut: http://www.jensbits.com/2010/03/29/jquery-ui-autocomplete-widget-with-php-and-mysql/ .
The jQuery aren't displaying. You can actually click the grey line (shown in picture) and it will load everything. I just can't see the names for some reason.
I thought it could be a css problem, but I couldn't find anything relevant.
<div class="guestinfo">
<form action='' method="POST">
<div class="ui-widget">
<div class="existingguest"><label>Exisiting Guest</label>
<input type="text" class="auto" name="guests" id="guests"/></div>
</div>
<div class="existingguestinfo">
<div><label>First Name</label><input readonly="readonly" type="text" id="firstname" name="firstname"/></div>
<div><label>Last Name</label><input readonly="readonly" type="text" id="lastname" name="lastname"/></div>
<script>
$(function() {
$('.auto').val("");
$(".auto").autocomplete({
source: "classes/autocomplete_guests.php",
minLength: 1,
select: function(event, ui) {
$('#firstname').val(ui.item.fname);
$('#lastname').val(ui.item.lname);
$('#address').val(ui.item.address);
$('#phone').val(ui.item.phone);
}
});
});
</script>
<!--<div><label>Add New Guest</label></div>-->
<div><label>Address</label><input readonly="readonly" type="text" id="address" name="address"/></div>
<div><label>Phone</label><input readonly="readonly" type="text" id="phone" name="phone"/></div>
</br></div>
</form>
</div> <!-- end guestinfo div -->
autocomplete_guests.php
<?php
//open connection
require_once('../config/db.php');
$con = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
$return_arr = array();
/* If connection to database, run sql statement. */
if ($con)
{
$fetch = mysqli_query($con, "SELECT * FROM guests WHERE lname like '%".mysqli_real_escape_string($con, $_GET['term'])."%'");
/* Retrieve and store in array the results of the query.*/
while ($row = mysqli_fetch_array($fetch, MYSQL_ASSOC)) {
$row_array['id'] = $row['id'];
$row_array['lname'] = $row['lname'];
$row_array['fname'] = $row['fname'];
$row_array['gender'] = $row['gender'];
$row_array['address'] = $row['address'];
$row_array['city'] = $row['city'];
$row_array['state'] = $row['state'];
$row_array['phone'] = $row['phone'];
$row_array['email'] = $row['email'];
$row_array['dob'] = $row['dob'];
$row_array['zip'] = $row['zip'];
array_push($return_arr,$row_array);
}
}
/* Free connection resources. */
mysqli_close($con);
/* Toss back results as json encoded array. */
echo json_encode($return_arr);
?>

Answer 1

You should
1) write script tags like <script type="text/javascript">
2) Put your javascript at the bottom of the page and not half way through the form... (?!!)
3) Add a document ready to that function so that it executes when the page finished loading.
$( document ).ready(function() {
4) Make sure you have included all the required jquery files: Jquery Core, Jquery UI, etc.
5) Provide some CSS if you think that is the problem??
EDIT:
Ignore 3. Ive just looked at the plugin documentation.

Answer 2

Just try these lines inside before ur Jquery script
====sorry if am wrong =====