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)


    <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>
$(function() {
        var availableTags = [
        //Pull data from database
            $query = mysql_query('SELECT fname, lname, image FROM users');
            $num = mysql_num_rows($query);
            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 '}';
                    echo '}, ';

        $( "#tags" ).autocomplete({
            source: availableTags,


<div class="demo">

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">