diff --git a/WebContent/html/javascript/request.jsp b/WebContent/html/javascript/request.jsp
index 086c24f..0ad33c5 100644
--- a/WebContent/html/javascript/request.jsp
+++ b/WebContent/html/javascript/request.jsp
@@ -59,20 +59,44 @@ function ajaxFunction(){
 
 //add event listeners to the options in the left sidebar
 for(var a = 0; a < hardwareOptions.length; a++){
-	hardwareOptions[a].addEventListener('click', show);
+	hardwareOptions[a].addEventListener('click', refresh);
 }
 for(var a = 0; a < softwareOptions.length; a++){
-	softwareOptions[a].addEventListener('click', show);
+	softwareOptions[a].addEventListener('click', refresh);
 }
+// searchbar listener
+var searchbar = document.getElementsByName('searchBar');
+searchbar[0].onkeyup = refresh;
 
-//when an option is selected, show a new list of devices based on what the user asked for
-function show(){
+function refresh() {
+	show(fuzzyFilter(filter(devices)));
+}
 
-	//currentFilter = readFilter();
-	//selectedDevices = getDevices(currentFilter); //when connor is done with the database library getDevices should be redirected there
+//when an option is selected, show a new list of devices based on what the user asked for
+function show(deviceArray){
 
-	var type = this.getAttribute('data-type');
+	// var type = this.getAttribute('data-type');
 	var html = '';
+	for (var i = 0; i < deviceArray.length; i++) {
+		html += '<div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/my-icons-collection-devices/png/' + deviceArray[i].hardware + '.png" class = "device">' + deviceArray[i].name + '</div><div class = "deviceDescp"><p>' + deviceArray[i].description + '</p><button class = "requestbutton" id = "button' + (i+1) + '" type="button">Order device</button></div></div><br><br>'
+	}
+	
+	if(html.localeCompare("")==0)
+		html += "<p>There are no devices with the search criteria: " + this.textContent + "</p>";
+	
+	//add to HTML page
+	document.getElementById('devContainer').innerHTML = html;
+	
+	//now we need to add event listeners to all the request buttons
+	var requestbuttons = document.getElementsByClassName('requestbutton');
+	for(var i = 0; i < requestbuttons.length; i++) {
+		requestbuttons[i].addEventListener('click',addToCart);
+	}
+}
+
+
+function filter(deviceArray) {
+	var filteredArray = new Array();
 	var activeHOptions = [];
 	var activeSOptions = [];
 	for(var i = 0; i < hardwareOptions.length; i++) {
@@ -85,60 +109,83 @@ function show(){
 			activeSOptions.push(softwareOptions[i].getAttribute("data-type"));
 		}
 	}
-	if(activeHOptions.length == 0 && activeSOptions.length == 0){
-		document.getElementById('devContainer').innerHTML = "<p>Choose an option to the left to begin requesting!</p>";
-	}
-	else{
-		//iterate through the hardcoded device DB and select all the ones that match the selected option
-		for(var i = 0; i < devices.length; i++){
-			var hardwareMatch = false;
-			var softwareMatch = false;
-	
-			for(var j = 0; j < activeHOptions.length; j++) {
-				if (activeHOptions[j] == devices[i].hardware){
-					hardwareMatch = true;
-				}
-			}
-			
-			if (activeHOptions.length == 0) {
+	//iterate through the hardcoded device DB and select all the ones that match the selected option
+	for(var i = 0; i < deviceArray.length; i++){
+		var hardwareMatch = false;
+		var softwareMatch = false;
+		for(var j = 0; j < activeHOptions.length; j++) {
+			if (activeHOptions[j] == deviceArray[i].hardware){
 				hardwareMatch = true;
 			}
-			
-			for(var j = 0; j < activeSOptions.length; j++) {
-				if (activeSOptions[j] == devices[i].manufacturer){
-					softwareMatch = true;
+			// now we must handle the 'other' case
+			// there is no 'other' catagory, so if that is the option selected we must make sure
+			// that the device in question is not one of the categories we DO have options for
+			if(activeHOptions[j] === 'Other')
+			{
+				var othermatch = true;
+				for (var k = 0; k < hardwareOptions.length; k++) {
+					if(devices[i].hardware == hardwareOptions[k].getAttribute('data-type'))
+						othermatch = false;
 				}
+				if(othermatch) hardwareMatch = true;
 			}
-			
-			if (activeSOptions.length == 0) {
-				softwareMatch = true;
+		}
+		if (activeHOptions.length == 0) {
+			hardwareMatch = true;
+		}
+		// now we must handle the 'other' case
+		// there is no 'other' catagory, so if that is the option selected we must make sure
+		// that the device in question is not one of the categories we DO have options for
+		if(activeSOptions[j] === 'Other')
+		{
+			var othermatch = true;
+			for (var k = 0; k < softwareOptions.length; k++) {
+				if(devices[i].manufacturer == softwareOptions[k].getAttribute('data-type'))
+					othermatch = false;
 			}
-			
-				
-			if(hardwareMatch == true && softwareMatch == true){
-			//if((hw_type.localeCompare(devices[i].hardware) == 0 && sw_type.localeCompare(devices[i].software) == 0) && !isUnavailable(i)){
-				html += '<div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/my-icons-collection-devices/png/' + devices[i].hardware + '.png" class = "device">' + devices[i].name + '</div><div class = "deviceDescp"><p>' + devices[i].description + '</p><button class = "requestbutton" id = "button' + (i+1) + '" type="button">Order device</button></div></div><br><br>'
+			if(othermatch) softwareMatch = true;
+		}
+		for(var j = 0; j < activeSOptions.length; j++) {
+			if (activeSOptions[j] == deviceArray[i].manufacturer){
+				softwareMatch = true;
 			}
 		}
-		
-		if(html.localeCompare("")==0)
-			html += "<p>There are no devices with the search criteria: " + this.textContent + "</p>";
-	
-		//add to HTML page
-		document.getElementById('devContainer').innerHTML = html;
-		
-		//now we need to add event listeners to all the request buttons
-		var requestbuttons = document.getElementsByClassName('requestbutton');
-		for(var i = 0; i < requestbuttons.length; i++){
-			requestbuttons[i].addEventListener('click',addToCart);
+		if (activeSOptions.length == 0) {
+			softwareMatch = true;
 		}
+		if(hardwareMatch == true && softwareMatch == true)
+			filteredArray.push(deviceArray[i]);
 	}
+	return filteredArray;
 }
 
-function readFilter() {
-	//Constrcts a filter object for use in the database library that corresponds to the checked optionsin the sidebar
-	var hw_type;
-	var sw_type;
+function fuzzyFilter(deviceArray) {
+	var searchText = document.getElementsByName('searchBar')[0].value;
+	var options = {
+		pre: '<b>',
+		post: '</b>',
+		extract: function(arg) {return arg.name;}
+	}
+	var fuzzyResults = fuzzy.filter(searchText, deviceArray, 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 addToCart(){
@@ -190,5 +237,6 @@ function makeDeviceArray(){
 }
 //this code allows a message to appear that indicates that the item was successfully placed in the shopping cart.
 </script>
+<script src="../javascript/lib/fuzzy.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/WebContent/html/webpages/listingPage.jsp b/WebContent/html/webpages/listingPage.jsp
index e481837..fa01508 100644
--- a/WebContent/html/webpages/listingPage.jsp
+++ b/WebContent/html/webpages/listingPage.jsp
@@ -81,7 +81,7 @@
   <h2>Device Dictionary
   <!-- 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%;"  />
+    <input type="search" class="form-control" name="searchBar" placeholder=" search for devices by name" autocomplete="off" style="width: 50%; text-align: left; margin: 1%;"  />
     </form>
   </h2>
   <div id = "devContainer"></div>   
diff --git a/WebContent/html/webpages/requestPage.jsp b/WebContent/html/webpages/requestPage.jsp
index e6d30e3..ebf9e87 100644
--- a/WebContent/html/webpages/requestPage.jsp
+++ b/WebContent/html/webpages/requestPage.jsp
@@ -87,8 +87,13 @@
   </div>
 
   <div class = "displayDevice">
-    <h2>Available Devices</h2>
-    <div id = "devContainer"><p>Choose an option to the left to begin requesting!</p></div>   
+    <h2>Available Devices
+      <!-- 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 devices by name" autocomplete="off" style="width: 50%; text-align: left; margin: 1%;"  />
+    </form>
+    </h2>
+    <div id = "devContainer"><p>Or choose an option to the left to begin requesting!</p></div>   
   </div>
 
   <div class = "cartConfirm" id = "added">