Prevent Blank Page and Display Data in Table

问题

I have a working code in Google Script that is compost on Index.HTML and code.gs actually this code is working if you will test it in your google app script and here it is

Index.HTML

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

<script>
   function displayMessage() {
        var searchTerm;
        searchTerm = document.getElementById('idSrchTerm').value;
        console.log('searchTerm: ' + searchTerm );
         google.script.run.withSuccessHandler(handleResults).processForm(searchTerm.replace("'","\'")); 
       } 


          function handleResults(results){      
         var length=results.length; // total elements of results
          var table = document.getElementById('output');
         for(var i=0;i<length;i++)
         {
         var item=results[i];
         item=item.split("|~|");

        }
        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> 

<table id ="output">
<tr>
<th>File Details</th>
</tr>
<tr>
<td>
<script>

    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>
</td>
</tr>
</table>

</body>
</html>

and this is Code.GS

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 + "'"; 
  var names = [];
  var files = DriveApp.searchFiles(searchFor); 
  while (files.hasNext()) {
    var file = files.next();
    var fileId = file.getId();
    var lm = file.getLastUpdated();
    var owner = file.getOwner().getName();
    var filesize = file.getSize();
    var name = file.getName() +"|~|"+file.getUrl()+"|~|"+lm+"|~|"+owner+"|~|"+filesize;  
    names.push(name); 
    Logger.log(file.getUrl());
  }
  return names; 
}


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

This code is working perfectly but the output of this is everytime i searched a data it transfers me to a new page with the search result.

My Question is How can I display the data in my Table Tag?

Here is the image of where should be the data will put.

Image Link

来源：https://stackoverflow.com/questions/44428526/prevent-blank-page-and-display-data-in-table

标签

javascript