$( "#tags" ).autocomplete({
source: availableTags,
focus:function(e, ui){
//if focusing on the extra elements return false thus doing nothing
return ui.item.idx<=2;
},
select:function(e, ui){
//if selecting on the extra elements return false thus doing nothing
return ui.item.idx<=2;}
}) .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
//small trick to get the current element index while the list is constructing, we set this as a helper for later usage inside the item.
item.idx=ul[0].childElementCount;
return $( "<li>" )
//if index is greater than 2 then we add a custom 'disable' class. this will help formating the disabled elements
.toggleClass('disable',ul[0].childElementCount>2)
//appending the element
.append( "<a>" + item.label + "</a>" ).appendTo( ul );
};