Create a searchable telephone directory with Google Sheets and Apps Script?

I work for a charity who are google cloud based. They have limited resources and no SQL database, I have been asked to develop a searchable telephone directory that sits on our intranet.

Please see the code.gs below:

function doGet(e){
  var ss = SpreadsheetApp.openById('sheetId');
  var sheet = ss.getSheetByName('Staff');
  var range = sheet.getDataRange();
  var values = range.getValues();
  var holderArray = [];
  var HTMLTemp = HtmlService.createTemplateFromFile('index');

  Logger.log(values);
  var holder = '';
  for(x=1; x<values.length; x++){
    holderArray.push({
      "firstname" : values[x][0],
      "lastname" : values[x][1],
      "service" : values[x][2],
      "role" : values[x][3],
      "location" : values[x][4],
      "deskphone" : values[x][5],
      "mobilephone" : values[x][6],
      "email" : values[x][7]
    });
  }
  HTMLTemp.data = holderArray;
  var html = HTMLTemp.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
  return html;
}

function myFunction1(){
  var ss = SpreadsheetApp.openById('sheetid');
  var sheet = ss.getSheetByName('Staff');
  var range = sheet.getDataRange();
  var values = range.getValues();
  var holderArray = [];
  var HTMLTemp = HtmlService.createTemplateFromFile('index');

  Logger.log(values);
  var holder = '';
  for(x=1; x<values.length; x++){
    holderArray.push({
      "firstname" : values[x][0],
      "lastname" : values[x][1],
      "service" : values[x][2],
      "role" : values[x][3],
      "location" : values[x][4],
      "deskphone" : values[x][5],
      "mobilephone" : values[x][6],
      "email" : values[x][7]
     });
  }
  HTMLTemp.data = holderArray;
  var html = HTMLTemp.evaluate().setWidth(1020).setHeight(800);
  SpreadsheetApp.getUi().showModalDialog(html, 'Title');

I will be deploying this as a web app, and have included the index.html below too:

<script>
  var datags = <?!= JSON.stringify(data) ?>;
</script>
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous">
  </head>
  <body>
     <div style="padding: 5px 20px; width: 50%;">
        <header class="text-center" style="padding: 15px;">
          <h1>Age UK Essex Staff Directory</h1>
        </header>
        <input type="text" id="filter"/>
        <input type="button" id="btnFilter" value="Filter" />
        <table id="myTable" class="table table-striped" style="margin-top: 10px;">
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Service</th>
            <th>Role</th>
            <th>Location</th>
            <th>Desk Phone</th>
            <th>Mobile Phone</th>
            <th>Email</th>
          </tr>
        </table>
      </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
        $(function(){
        console.log(datags);
          jQuery.each(datags, function() {
              console.log(this);
            $('#myTable tr:last').after('<tr style="font-size: 12px; font-family: arial;"><td>'+this.firstname+'</td><td>'+this.lastname+'</td><td>'+this.service+'</td><td>'+this.role+'</td><td>'+this.location+'</td><td>'+this.deskphone+'</td><td>'+this.mobilephone+'</td><td>'+this.email+'</td></tr>')
          })
        });
     </script>
     <script>
       $(document).ready(function() {
         $("#btnFilter").click(function() {
         $("#myTable tr").show();
          if($("#filter").val.length > 0) {
             $("#myTable tr").filter(function(index, elm) {
                return $(elm).html().toUpperCase().indexOf($("#filter").val().toUpperCase()) < 0;
            }).hide();
        }
    });
});
    </script>
  </body>
</html>

This works for the most part although when I remove the seacrh criteria I'd prefer it if the content returned to normal rather than staying on the results of the previous seatch.