| {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();␊ |
| }␊ |
| });␊ |
| });␊ |