separated widget module from initialization

moving widget functionality to separate file required adding a new
module which assumes responsibility for initialization ("glue code"),
since that doesn't happen automatically anymore (cf. previous commit;
e74be2e)

index.html

@@ -32,6 +32,7 @@ <h1>Contacts</h1>
 	</ul>
 
 	<script src="extlib/jquery.js"></script>
+	<script src="lib/filter_widget.js"></script>
 	<script src="lib/main.js"></script>
 </body>
 

lib/filter_widget.js

@@ -0,0 +1,30 @@
+(function($) {
+
+"use strict";
+
+window.createFilterWidget = function(contactList) {
+	$('<input type="search" />').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));

lib/main.js

@@ -1,30 +1 @@
-(function($) {
-
-"use strict";
-
-window.createFilterWidget = function(contactList) {
-	$('<input type="search" />').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"));

test/index.html

@@ -35,7 +35,7 @@
 	</div>
 
 	<script src="../extlib/jquery.js"></script>
-	<script src="../lib/main.js"></script>
+	<script src="../lib/filter_widget.js"></script>
 
 	<script src="extlib/qunit.js"></script>