Problem: I am currently using Jquery Autocomplete UI and it works perfectly but I would like to add more to the codes, but I have no clue where to place the codes.
What I would like to add: I would like to add the Keyword Hightlights, HREF LINK (window.location.href), and still be able to use HTML images.
Question: How do I go about adding these three (highlights, href linking, and html images) into my current codes.
Thanks in advance (see codes below)
(autosuggestion.php)
<html>
<head>
<title>AutoComplete Practice (Forms)</title>
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
</head>
<body>
<script>
$(function() {
var availableTags = [
//Pull data from database
<?php
$query = mysql_query('SELECT fname, lname, image FROM users');
$num = mysql_num_rows($query);
$i=0;
while($search = mysql_fetch_assoc($query))
{
echo '{ label:';
echo '"<img height=\"50\" width=\"50\" align=\"top\" src=\"upload/'.$search['image'].'\" /> '.$search['fname'].' '.$search['lname'].'"';
echo ', value:';
echo '"'.$search['fname'].' '.$search['lname'].'"';
if($i == $num)
{
echo '}';
}
else
{
echo '}, ';
}
$i++;
}
?>
];
$( "#tags" ).autocomplete({
source: availableTags,
}
});
});
</script>
<div class="demo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</div>
</body>
</html>