diff --git a/index.html b/index.html index a975506..1d79fb0 100644 --- a/index.html +++ b/index.html @@ -32,6 +32,7 @@

Contacts

+ diff --git a/lib/filter_widget.js b/lib/filter_widget.js new file mode 100644 index 0000000..57792e8 --- /dev/null +++ b/lib/filter_widget.js @@ -0,0 +1,30 @@ +(function($) { + +"use strict"; + +window.createFilterWidget = function(contactList) { + $('').insertBefore(contactList). + on("keyup", onFilter); +} + +function onFilter(ev) { + var filterField = $(this); + var contacts = filterField.next(); + var input = filterField.val(); + + var names = contacts.find("li .p-name"); + names.each(function(i, node) { + var el = $(node); + var name = el.text(); + + var match = name.indexOf(input) === 0; + var container = el.closest(".h-card"); + if(match) { + container.slideDown(); + } else { + container.slideUp(); + } + }); +} + +}(jQuery)); diff --git a/lib/main.js b/lib/main.js index 57792e8..963b86e 100644 --- a/lib/main.js +++ b/lib/main.js @@ -1,30 +1 @@ -(function($) { - -"use strict"; - -window.createFilterWidget = function(contactList) { - $('').insertBefore(contactList). - on("keyup", onFilter); -} - -function onFilter(ev) { - var filterField = $(this); - var contacts = filterField.next(); - var input = filterField.val(); - - var names = contacts.find("li .p-name"); - names.each(function(i, node) { - var el = $(node); - var name = el.text(); - - var match = name.indexOf(input) === 0; - var container = el.closest(".h-card"); - if(match) { - container.slideDown(); - } else { - container.slideUp(); - } - }); -} - -}(jQuery)); +createFilterWidget(jQuery("ul.contacts")); diff --git a/test/index.html b/test/index.html index 226126f..ebab7e7 100644 --- a/test/index.html +++ b/test/index.html @@ -35,7 +35,7 @@ - +