maverick/public-apis
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use Vue method to filter search listings

Browse source
This commit is contained in:
davemachado 2017-08-17 12:20:52 -04:00
parent 271649c9ec
commit 6b03ab1af6
2 changed files with 4 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/index.html
View file

@ -23,10 +23,10 @@
</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 @@
</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>

20
src/scripts.js
View file

@ -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";
}
}
}
}