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;
	 }
.cobolSL:hover { background: url('http://i59.tinypic.com/30krdhy.jpg') right center no-repeat;
    background-size:20px 20px;
    color:black;
	 }
.javaSL {
  	background: url('http://i62.tinypic.com/34fktav.jpg') right center no-repeat;
	background-size:20px 20px;
}
.javaSL:hover {
  	background: url('http://i62.tinypic.com/34fktav.jpg') right center no-repeat;
	background-size:20px 20px;
    color:black;
}
.javaScriptSL {
  	background: url('http://i58.tinypic.com/23m0zr4.jpg') right center no-repeat;
	background-size:20px 20px;
}
.javaScriptSL:hover {
  	background: url('http://i58.tinypic.com/23m0zr4.jpg') right center no-repeat;
	background-size:20px 20px;
    color:black;
}
.CPluseSL {
  	background: url('http://i61.tinypic.com/im08eu.jpg') right center no-repeat;
	background-size:20px 20px;
}
.CPluseSL:hover {
  	background: url('http://i61.tinypic.com/im08eu.jpg') right center no-repeat;
	background-size:20px 20px;
    color:black;
}

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;
    
    if(item.personal) {
        if(item.label == 'COBOL') {
            listItem = jQuery("<li class='cobolSL'></li>")
                .data("item.autocomplete", item)
                .append("<a class='cobolSL'>" + item.label + "</a>")
                .appendTo(ul);
        } else if(item.label == 'Java') {
            listItem = jQuery("<li class='javaSL'></li>")
                .data("item.autocomplete", item)
                .append("<a class='javaSL'>" + item.label + "</a>")
                .appendTo(ul);
        } else if(item.label == 'JavaScript') {
            
            listItem = jQuery("<li class='javaScriptSL'></li>")
            .data("item.autocomplete", item)
            .append("<a class='javaScriptSL'>" + item.label + "</a>")
            .appendTo(ul);
        } else {
            listItem = jQuery("<li class='CPluseSL'></li>")
            .data("item.autocomplete", item)
            .append("<a class='CPluseSL'>" + item.label + "</a>")
            .appendTo(ul);
        }
    }
    return listItem;
};