<%
//database query
@@ -231,8 +236,16 @@ var devices = makeDeviceArray();
var manufacturers = new Array;
var hardwares = new Array;
var availabilities = new Array;
+
+// searchbar listener
+var searchbar = document.getElementsByName('searchBar');
+searchbar[0].onkeyup = refresh;
+function refresh() {
+ populateDevices(fuzzyFilter(devices));
+}
+
//Populate locations into table!
-populateDevices();
+populateDevices(devices);
//adds event listeners to all table records
$("tr.entry").click(modifyModal);
@@ -264,21 +277,53 @@ document.getElementById('modifyHardware').innerHTML = hardwareHTML;
document.getElementById('modifyAvailability').innerHTML = availabilityHTML;
//Places all locations from query into page
-function populateDevices(){
+function populateDevices(deviceArray){
var html = "";
- for(var i = 0; i < devices.length; i++){
- html += "
" + devices[i].name + "
" + devices[i].description + "
" + devices[i].status + "
" + devices[i].mac + "
" + devices[i].manufacturer + "
" + devices[i].hardware + "
" + devices[i].model + "
" + devices[i].serial + "
" + devices[i].nfc + "
";
- if(findInArray(devices[i].manufacturer,manufacturers) == false){
- manufacturers.push(devices[i].manufacturer);
+ for(var i = 0; i < deviceArray.length; i++){
+ html += "
" + deviceArray[i].name + "
" + deviceArray[i].description + "
" + deviceArray[i].status + "
" + deviceArray[i].mac + "
" + deviceArray[i].manufacturer + "
" + deviceArray[i].hardware + "
" + deviceArray[i].model + "
" + deviceArray[i].serial + "
" + deviceArray[i].nfc + "
";
+ if(findInArray(deviceArray[i].manufacturer,manufacturers) == false){
+ manufacturers.push(deviceArray[i].manufacturer);
}
- if(findInArray(devices[i].hardware,hardwares) == false)
- hardwares.push(devices[i].hardware);
- if(findInArray(devices[i].status,availabilities) == false)
- availabilities.push(devices[i].status);
+ if(findInArray(deviceArray[i].hardware,hardwares) == false)
+ hardwares.push(deviceArray[i].hardware);
+ if(findInArray(deviceArray[i].status,availabilities) == false)
+ availabilities.push(deviceArray[i].status);
}
document.getElementById("tablebodymain").innerHTML = html;
}
+// returns subset of deviceArray, by fuzzy-matching the string in the search bar against each field of a device object
+function fuzzyFilter(deviceArray)
+{
+ var searchText = document.getElementsByName('searchBar')[0].value;
+ var options = {
+ pre: '',
+ post: '',
+ 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);
+
+ for (var i = 0; i < fuzzyResults.length; i++) {
+ results[i] = {
+ id:fuzzyResults[i].original.id,
+ name:fuzzyResults[i].string, //this is the one being replaced
+ description:fuzzyResults[i].original.description,
+ status:fuzzyResults[i].original.status,
+ mac:fuzzyResults[i].original.mac,
+ manufacturer:fuzzyResults[i].original.manufacturer,
+ hardware:fuzzyResults[i].original.hardware,
+ model:fuzzyResults[i].original.model,
+ serial:fuzzyResults[i].original.serial,
+ nfc:fuzzyResults[i].original.nfc,
+ };
+ }
+ return results;
+}
+
//Make JSON from Java of retrieved devices.
function makeDeviceArray(){
window.json = '<%=deviceString%>';
@@ -330,6 +375,6 @@ function findInArray(string,array){
}
-
+
\ No newline at end of file