JQuery UI Autocomplete with Menu footer

Adding a menu footer to the JQuery UI Autocomplete menu using "_renderMenu" extension method.

by frank david

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="ui-widget">
    <label for="tags">Tags:</label>
    <input id="tags">
</div>

CSS

.acmenu_footer {
    text-align: center;
}
.acmenu_item {
    border-bottom: solid 1px black;
}
.acmenu_item_odd {
    background-color: #eeeeee;
	
}


.ui-autocomplete{
	max-height: 150px;
	overflow-y: scroll;
}

JavaScript

var availableTags = [
    "ActionScript", "AppleScript", "Asp", "BASIC",
    "C", "C++", "Clojure", "COBOL", "ColdFusion",
    "Erlang", "Fortran", "Groovy", "Haskell", "Java",
    "JavaScript", "Lisp", "Perl", "PHP", "Python",
    "Ruby", "Scala", "Scheme"];

$("#tags").autocomplete({
    source: availableTags
})
.autocomplete("instance")._renderMenu = function (ul, items) {
    var that = this;
    $.each(items, function (index, item) {
        that._renderItemData(ul, item);
    });
    
    //Alter the look of the list items
    $(ul).find("li:odd").addClass("acmenu_item_odd");
    $(ul).find("li").addClass("acmenu_item");
    
    //Append a Footer list item to the menu
    $(ul).append(
        "<li><div class='acmenu_footer'>This is my Footer</div></li>"
    );
};