| {literal}␊ | 
| $(document).ready(function() {␊ | 
| $("input.filter-list").each(function() {␊ | 
| var lists = $("ul#" + $(this).attr("rel"));␊ | 
| var input = $(this);␊ | 
| var lists = $("ul#" + input.attr("rel"));␊ | 
| if (lists.length == 0)␊ | 
| return;␊ | 
| var list = $(lists[0]);␊ | 
| var wrapper = input.parent();␊ | 
| ␊ | 
| // a list should contain a reasonable amount of items␊ | 
| // to be filterable - we also give the filter input a␊ | 
| // special class here so we recognize it later in case␊ | 
| // we have to hide it when the list view is collapsed␊ | 
| if (list.children("li").length > 10) {␊ | 
| $(this).addClass("activated");␊ | 
| $(this).focus(function() {␊ | 
| wrapper.addClass("activated");␊ | 
| input.focus(function() {␊ | 
| // ensure that the parent of the list keeps activated / opened␊ | 
| list.parent().addClass("activated");␊ | 
| if ($(this)[0].value == $(this).attr("title"))␊ | 
| $(this).attr("value", "").removeClass("default");␊ | 
| if (input.attr("value") == input.attr("title")) {␊ | 
| input.attr("value", "");␊ | 
| wrapper.removeClass("default");␊ | 
| }␊ | 
| });␊ | 
| $(this).blur(function() {␊ | 
| input.blur(function() {␊ | 
| list.parent().removeClass("activated");␊ | 
| if ($(this)[0].value.length == 0)␊ | 
| $(this).attr("value", $(this).attr("title")).addClass("default");␊ | 
| if (input.attr("value").length == 0) {␊ | 
| input.attr("value", input.attr("title"));␊ | 
| wrapper.addClass("default");␊ | 
| }␊ | 
| });␊ | 
| $(this).keyup(function(ev) {␊ | 
| input.keyup(function(ev) {␊ | 
| var filter = $(this)[0];␊ | 
| list.children("li").css('display', 'block');␊ | 
| list.children("li").filter(function(index) {␊ | 
|  | 
| return true;␊ | 
| }).css('display', 'none');␊ | 
| });␊ | 
| wrapper.children('span').click(function() {␊ | 
| input.val('').keyup().blur();␊ | 
| });␊ | 
| // initialize it with the default␊ | 
| $(this)[0].value = "";␊ | 
| $(this).blur();␊ | 
| input.val('').blur();␊ | 
| }␊ | 
| });␊ | 
| });␊ |