标签自动填充功能

I searched for the auto complete tag style that stackoverflow uses and I got an answer from this question on stackoverflow and I also followed this github link from the question which I got my answer. In the github example.com here is the jQuery code below:

        $(function(){
        var sampleTags = ['c++', 'java', 'php', 'coldfusion', 'javascript', 'asp', 'ruby', 'python', 'c', 'scala', 'groovy', 'haskell', 'perl', 'erlang', 'apl', 'cobol', 'go', 'lua'];
       --------------------------
        $('#allowSpacesTags').tagit({
            availableTags: sampleTags,
            allowSpaces: true
        });

    });
    //the html for input box
    <form>
        <p></p>
        <ul id="allowSpacesTags"></ul>
    </form>

And that is the array containing the auto completion. But the problem is that I want my own auto completion array to be from my database which I want the images, names and usernames of the users to show up as the auto completion and when a user is clicked, the username goes into the input box. Let's assume the html output from my database will look like this for each user:

<div><img src="userimg" />user full name<br>username</div>

But if I pass this code in the auto completion array the images won't show up instead if I press the < key, the html code comes up as the auto completion. Please how do I make the auto completion array to contain images and html codes also and when a user is clicked, only the username goes into the input box. Anyone with a better Idea?