AutoCompleteUICSS

In this JQuery's Autocomplete options CSS style's modified as per the results.

by Padmesh Soni

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>
Choose Language: <input />

CSS

.cobolSL { background: url('http://i59.tinypic.com/30krdhy.jpg') right center no-repeat;
    background-size:20px 20px;
	 }
.javaSL {
  	background: url('http://i62.tinypic.com/34fktav.jpg') right center no-repeat;
	background-size:20px 20px;
}
.javaScriptSL {
  	background: url('http://i58.tinypic.com/23m0zr4.jpg') right center no-repeat;
	background-size:20px 20px;
}
.CPluseSL {
  	background: url('http://i61.tinypic.com/im08eu.jpg') right center no-repeat;
	background-size:20px 20px;
}

JavaScript

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

jQuery("input").autocomplete({
    source: data
}).data("autocomplete")._renderItem = function(ul, item) {
        
    var listItem = jQuery("<li></li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.label + "</a>")
        .appendTo(ul);
    
    if(item.personal) {
        if(item.label == 'COBOL') {
            listItem.addClass("cobolSL");
        } else if(item.label == 'Java') {
            listItem.addClass("javaSL");
        } else if(item.label == 'JavaScript') {
            listItem.addClass("javaScriptSL");
        } else {
            listItem.addClass("CPluseSL");
        }
    }
    return listItem;
};