<input id="bin-search" type="text" placeholder="Filter by name, just start typing..."/>

<div id="bin-table-wrapper">
<table id="bin-table">
<thead>
<tr>
    <th>Binary</th>
    <th>Functions</th>
</tr>
</thead>
<tbody>
{% for file in site.gtfobins %}
<tr>
    <td><a href="{{ file.url }}" class="bin-name">{% include get_bin_name path=file.path %}</a></td>
    <td>{% include function_list.html bin=file %}</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr><td id="search-message" colspan="2">No binary matches...</td></tr>
</tfoot>
</table>
</div>

<script>
 var searchBox = document.querySelector('#bin-search');
 var searchMessage = document.querySelector('#search-message');
 searchMessage.style.display = 'none';

 // ensure height during filtering
 var binTableWrapper = document.querySelector('#bin-table-wrapper');
 binTableWrapper.style.height = binTableWrapper.clientHeight + 'px';

 searchBox.addEventListener('input', function () {
     var query = searchBox.value.toLowerCase().trim();
     var noResults = true;

     document.querySelectorAll('#bin-table tbody tr').forEach(function (row) {
         var binName = row.firstElementChild.firstElementChild.innerText;
         if (binName.indexOf(query) !== -1) {
             row.style.display = '';
             noResults = false;
         } else {
             row.style.display = 'none';
         }
     });

     searchMessage.style.display = noResults ? '' : 'none';
 });

 addEventListener('keydown', function (event) {
     if (event.key.toLowerCase().match(/^[a-z]$/)) {
         searchBox.focus();
     }
 });

</script>