Use Vue method to filter search listings

davemachado · davemachado · commit 6b03ab1af6df · 2017-08-17T12:20:52.000-04:00
diff --git a/src/index.html b/src/index.html
@@ -23,10 +23,10 @@ <h3 class="center-text">
 		</h3>
 	</header>
 	<body>
-		<div class=center-text>
-			<input type="text" id="searchbox" onkeyup="filterRows()" placeholder="search for a service">
-		</div>
 		<div id="app">
+			<div class=center-text>
+				<input type="search" id="searchbox" placeholder="Search APIs" autocomplete="off" spellcheck="false" tabindex="0" v-model="filter">
+			</div>
 			<div style="overflow-x:auto;">
 				<table id="entries">
 		  			<thead>
@@ -39,7 +39,7 @@ <h3 class="center-text">
 						</tr>
 		  			</thead>
 					<tbody>
-						<tr v-for="item in items">
+						<tr v-for="item in items" v-show="filtered(item)">
 							<td><a :href="item.Link">{{ item.API }}</a></td>
 							<td>{{ item.Description }}</td>
 							<td>{{ (item.Auth) ? item.Auth : '-' }}</td>
diff --git a/src/scripts.js b/src/scripts.js
@@ -34,23 +34,3 @@ new Vue({
 		}
 	}
 }).$mount('#app');
-
-function filterRows() {
-  var input, filter, table, tr, td, i;
-  input = document.getElementById("searchbox");
-  filter = input.value.toUpperCase();
-  table = document.getElementById("entries");
-  tr = table.getElementsByTagName("tr");
-
-  // Loop through all table rows and hide those who don't match the search
-  for (i = 0; i < tr.length; i++) {
-    td = tr[i].getElementsByTagName("td")[0];
-    if (td) {
-      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
-        tr[i].style.display = "";
-      } else {
-        tr[i].style.display = "none";
-      }
-    } 
-  }
-}
