1$( "#tags" ).autocomplete({
2 source: availableTags,
3 focus:function(e, ui){
4 //if focusing on the extra elements return false thus doing nothing
5 return ui.item.idx<=2;
6 },
7 select:function(e, ui){
8 //if selecting on the extra elements return false thus doing nothing
9 return ui.item.idx<=2;}
10 }) .data( "ui-autocomplete" )._renderItem = function( ul, item ) {
11 //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.
12 item.idx=ul[0].childElementCount;
13 return $( "<li>" )
14 //if index is greater than 2 then we add a custom 'disable' class. this will help formating the disabled elements
15 .toggleClass('disable',ul[0].childElementCount>2)
16 //appending the element
17 .append( "<a>" + item.label + "</a>" ).appendTo( ul );
18 };