JQuery Auto Complete Issues

I am trying to use AutoComplete which queries a mySQL database.
It seems to be pulling data however the box is coming up blank.
I think the query is working because when I use text that I know will return a record, I get a pop up, when i type other text, the pop up does not come up.

I have tried different versions of the CSS and the JS and same result. Pops up blank.

I have two files. tagsfield.php, which is the HTML for the tag field
And tagssearch.php which is the database query.


mysql_connect(localhost,"REMOVED","REMOVED")  or die("Unable to connect to MySQL");
@mysql_select_db("REMOVED")  or die( "Unable to select database");
$term = trim(strip_tags($_GET['term']));//retrieve the search term that autocomplete sends
$qstring  = "SELECT * FROM tags WHERE tagname LIKE '%".$term."%'";
$result = mysql_query($qstring);//query the database for entries containing the term

while ($row = mysql_fetch_array($result,MYSQL_ASSOC))//loop through the retrieved values
	 $row['tagid']=(int)$row['tagid	'];
	 $row_set[] = $row;//build an array
echo json_encode($row_set);//format the array into json data


<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8" />
	<title>EAN - Demo using jQuery Autocomplete & PHP-MySQL Query for data</title>
	<link type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
	<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.min"></script>
	<link type="text/css" href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
	<link type="text/css" href="css/ui-lightness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" />
	<script type="text/javascript">
	$(function() {
      source: "tagssearch.php",
      minLength: 2,//search after two characters
      select: function(event,ui){
        alert ($tagid, $tagname);
      //do something, like search for your hotel detail page
<div class="demo">
  <div class="ui-widget">
	 <label for="autocomplete">Hotel Name: </label>
	 <input id="autocomplete" />
</div><!-- End demo -->


In Case you need it
Here is the table data.

-- ----------------------------
-- Table structure for `tags`
-- ----------------------------
  `tagid` int(10) NOT NULL AUTO_INCREMENT,
  `tagname` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`tagid`)

-- ----------------------------
-- Records of tags
-- ----------------------------
INSERT INTO tags VALUES ('1', 'Pop');
INSERT INTO tags VALUES ('2', 'Hot Artists');

  1. to see if the query script works, you can call it directly putting a search value in the query string
  1. the query script creates a two-dimensional array. Are you sure your jquery code handles that automatically to give you a $tagid and $tagname value?

Here you are using localhost as a constant. Shouldn’t it be a string instead?

mysql_connect([color="red"]localhost[/color],"REMOVED","REMOVED") ...

And here, $row_set hasn’t previously been defined, which causes issues too. Especially if you have reporting enabled.

$row_set[] = $row;//build an array 

And here, those spaces are bad.

$row['tagid']=(int)$row['tagid    '];

And lastly, the autocomplete expects the json data to be as label and value properties. Not as is shown below: