Hello,
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.
tagssearch.php
<?php
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['tagname']=htmlentities(stripslashes($row['tagname']));
$row['tagid']=(int)$row['tagid '];
$row_set[] = $row;//build an array
}
echo json_encode($row_set);//format the array into json data
mysql_close();
?>
tagsfield.php
<!DOCTYPE html>
<html lang="en">
<head>
<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() {
$("#autocomplete").autocomplete({
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
}
});
});
</script>
</head>
<body>
<div class="demo">
<div class="ui-widget">
<label for="autocomplete">Hotel Name: </label>
<input id="autocomplete" />
</div>
</div><!-- End demo -->
</body>
</html>
In Case you need it
Here is the table data.
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for `tags`
-- ----------------------------
DROP TABLE IF EXISTS `tags`;
CREATE TABLE `tags` (
`tagid` int(10) NOT NULL AUTO_INCREMENT,
`tagname` varchar(255) DEFAULT NULL,
PRIMARY KEY (`tagid`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;
-- ----------------------------
-- Records of tags
-- ----------------------------
INSERT INTO tags VALUES ('1', 'Pop');
INSERT INTO tags VALUES ('2', 'Hot Artists');