jQuery & jQueryUI Base

by andrewwhitaker

HTML

<link rel="stylesheet" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<input />

CSS

.personal { background-color: yellow; }

JavaScript

var data = [
{
    value: 1,
    personal: true,
    label: 'Java'
},
{
    value: 2,
    personal: false,
    label: 'C++'
},
{
    value: 3,
    personal: true,
    label: 'JavaScript'
},
{
    value: 4,
    personal: true,
    label: 'COBOL'
}];

$("input").autocomplete({
    source: data
}).data("autocomplete")._renderItem = function(ul, item) {
    var listItem = $("<li></li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.label + "</a>")
        .appendTo(ul);
    
    if (item.personal) {
        listItem.addClass("personal");
    }
    
    return listItem;
};