Search works, horray! (only for device names right now)

WebContent/html/javascript/listing.jsp

@@ -33,6 +33,10 @@ for(var a = 0; a < hardwareOptions.length; a++){
 for(var a = 0; a < softwareOptions.length; a++){
 	softwareOptions[a].addEventListener('click', refresh);
 }
+// searchbar listener
+var searchbar = document.getElementsByName('searchBar');
+searchbar[0].onkeyup = refresh;
+
 showAll();
 function showAll(){
 	var html = '';
@@ -57,7 +61,7 @@ function showAll(){
 	}
 }
 function refresh() {
-	var filteredDevices = applyFilter();
+	var filteredDevices = fuzzyFilter(applyFilter());
 	show(filteredDevices);
 }
 function show(deviceArray){
@@ -130,10 +134,39 @@ function applyFilter() {
 	return filteredDevices;
 }
 
+function fuzzyFilter(deviceList) {
+	var searchText = document.getElementsByName('searchBar')[0].value;
+	var options = {
+		pre: '<b>',
+		post: '</b>',
+		extract: function(arg) {return arg.name;}
+	}
+	var fuzzyResults = fuzzy.filter(searchText, deviceList, options);
+	// this returns a filtered array of objects with attributes 'index', 'original', 'score', and 'string'
+	// I am interested in the 'original' attribute, which is the relevant object exactly as it was submitted,
+	// and the 'string' attribute, which is the attribute that was compared against with matching characters conveniantly bolded
+	var results = new Array(fuzzyResults.length);
+	// so I'm going to rebuild a filtered device array in the same format as we've been using,
+	// substituting the 'name' attribute with the 'string' attribute returned by fuzzy
+	for (var i = 0; i < fuzzyResults.length; i++) {
+		results[i] = {
+			name:fuzzyResults[i].string, //This one is being replaced
+			id:fuzzyResults[i].original.id,
+			description:fuzzyResults[i].original.description,
+			hardware:fuzzyResults[i].original.hardware,
+			status:fuzzyResults[i].original.status,
+			model:fuzzyResults[i].original.model,
+			manufacturer:fuzzyResults[i].original.manufacturer,
+		};
+	}
+
+	return results;
+}
 function makeDeviceArray(){
 	window.json = '<%=deviceString%>';
 	return JSON.parse(window.json);
 }
 </script>
+<script src="../javascript/lib/fuzzy.js"></script>
 </body>
 </html>

WebContent/html/webpages/listingPage.jsp

@@ -79,9 +79,10 @@
 
 <div class = "displayDevice">
   <h2>Device Dictionary
-  <form>
-  <input type="search" class="form-control" name="searchBar" placeholder="type to search!" style="width: 50%; text-align: left; margin: 1%;"/>
-  </form>
+  <!-- I'm only using a form to leverage bootstrap's styling. The onsubmit function just returns false because the form is never meant to be submitted anywhere. -->
+    <form onsubmit="return false;">
+    <input type="search" class="form-control" name="searchBar" placeholder=" search for matches in device name, device type, description, etc." style="width: 50%; text-align: left; margin: 1%;"  />
+    </form>
   </h2>
   <div id = "devContainer"></div>   
 </div>