Display list of files inside table

as of now here is my code.

index.html

<!DOCTYPE html>
<html>
<head>
<base target="_top">

<script>
function handleFormSubmit(formObject) 
{
google.script.run.testSearch(formObject);

} 
</script>

<style>
table, th, td {
    border: 1px solid black;
}
</style>

</head>

<body>
<script>
      google.script.run.testSearch(formObject);

</script>

 <div class="container">
   <form method="" onsubmit="handleFormSubmit(this)"> 
    <input type="text" id="txtsearch" name="txtsearch" placeholder="Search" Required>    
    <input id= "mybutton" type="submit" value="Search" >
  </form> 

</div> 

</body>
</html>

adn here is my code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');


}
function testSearch(formObject){
  var txtsearch = formObject.txtsearch;
  var filename 

  var files = DriveApp.searchFiles('fullText contains "'+txtsearch+'"');
  while (files.hasNext()) {
    var file = files.next();
    Logger.log(file.getName());



  }
}

The index.html's output displays only a textbox and button,actually this code is working and it will display any file name that i've been searched IN Logger.log my goal here is how can i display that inside an html table? I hope I can add the table below the search box and do not redirect to any page.

TYSM

Here is a working example of your script: Code:

function doGet(e) { // main function
  var template = HtmlService.createTemplateFromFile('index.html');
  return template.evaluate().setTitle('Search Drive').setSandboxMode(HtmlService.SandboxMode.IFRAME);
}


function SearchFiles(searchTerm) {
  var searchFor ="fullText contains '" + searchTerm + "'"; //single quotes are needed around searchterm
  var names = [];
  var files = DriveApp.searchFiles(searchFor); 
  while (files.hasNext()) {
    var file = files.next();
    var fileId = file.getId();// To get FileId of the file
    var lm = file.getLastUpdated();
    var name = file.getName()+"|~|"+file.getUrl()+"|~|"+lm; // Im concatenating the filename with file id separated by |~|
    names.push(name); // adding to the array
    Logger.log(file.getUrl());
  }
  return names; // return results
}




// Process the form
function processForm(searchTerm) {
  var resultToReturn;
  Logger.log('processForm was called! ' + searchTerm);
  resultToReturn  = SearchFiles(searchTerm); 
  Logger.log('resultToReturn: ' + resultToReturn);
  return resultToReturn; // return the results
}

Index:

<!DOCTYPE html>
<html>
<head>
<base target="_top">

<script>
   function displayMessage() {
        var searchTerm;
        searchTerm = document.getElementById('idSrchTerm').value;
        console.log('searchTerm: ' + searchTerm );
        // Below call means: call to processForm passing the searchTerm value (previously escaped) and after finish call the handleResults function
         google.script.run.withSuccessHandler(handleResults).processForm(searchTerm.replace("'","\'")); 
       } 


          function handleResults(results){      
         var length=results.length; // total elements of results
         for(var i=0;i<length;i++)
         {
         var item=results[i];
         item=item.split("|~|"); // split the line |~|, position 0 has the filename and 1 the file URL
         document.writeln("<b><a href='"+item[1]+"' target='_blank'>"+item[0]+"</b></a> (Last modified: "+item[2]+")<br/><br/>"); // write result
        }
        document.writeln("End of results...");
       }

</script>

<style>
table, th, td {
    border: 1px solid black;
}
</style>

</head>

<body>


 <div class="container">
    Search: <input type="text" id="idSrchTerm" name="search">
    <input type="button" value="Search" name="submitButton" onclick="displayMessage()"/>

</div> 

</body>
</html>