title: How can I display a profile stored in a database after a SQL query in a Google Spreadsheet Sidebar?
body: <p>Basically here is what I'm doing:</p>
  
  <ul>
  <li>Storing a person profile in a MYSQL Database</li>
  <li>Creating a google spreadsheet add-on with a sidebar</li>
  <li>giving to the user the possibility to search profiles through the DB in the add-on</li>
  <li>giving to the user the possibility to display the datas of the profile in the Sidebar in the add-on</li>
  </ul>
  
  <p>So Imagine you want to search <strong>John</strong> but the input you've entered in the searchbar is the letter <strong>J</strong>. The result of this query will be <strong>Jack</strong> , <strong>Johnatan</strong>, <strong>Jules</strong>, <strong>Joe</strong> and <strong>John</strong> as they all have a <strong>J</strong>. All this names will appear as link for you to click on in order to have more datas displayed (age, picture, fullname, description...). Only problem is that the only way I've managed to achieve is by making a SQL query after each keyup in my HTML input then create <strong>X</strong> numbers (in this case 5) of hidden classes with the infos, that I can show by clicking on a created link. </p>
  
  <p>So this can easily work for 5 results, but imagine there's 100 of them and you only want to see one of them. Sounds crazy to create 100 hidden divs with all the infos to finally show only one.</p>
  
  <p>here is an example code</p>
  
  <p>code.gs</p>
  
  <pre><code>function onOpen(e) {
    SpreadsheetApp.getUi().createAddonMenu()
        .addItem('Start', 'showSidebar')
        .addToUi();
  }
  
  function onInstall(e) {
    onOpen(e);
  }
  
  function showSidebar() {
    var ui = HtmlService.createHtmlOutputFromFile('UI_HTML');
     SpreadsheetApp.getUi().showSidebar(ui);
  }
  
  //My function to search for profiles (returns an array with each lines found)
  function searchProfile(entry){
    var address = 'sql3.freemysqlhosting.net';
    var user = 'user';
    var userPwd = 'password';
    var db = 'sql12345678910';
    var instanceUrl = 'jdbc:mysql://' + address;
    var dbUrl = instanceUrl + '/' + db;
    var conn = Jdbc.getConnection(dbUrl, user, userPwd);
    var stmt = conn.createStatement();
    var ret = [];
    var res = stmt.executeQuery('SELECT * FROM item WHERE name = "' + entry + '"'
      + ' OR fullname LIKE CONCAT("%", "' + entry + '", "%")'
      + ' OR description LIKE CONCAT("%", "' + entry + '", "%")');
    var numCol = res.getMetaData().getColumnCount();
    var i = 0;
    var j = 0;
    while (res.next())
    {
        j = 0;
        if (!ret[i])
            ret[i] = [];
        while (j &lt; numCol)
        {
            ret[i][j]= res.getString(j + 1);
            j++;
        }
        i++;
     }
     return (ret);
  }
  </code></pre>
  
  <p>UI_HTML.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;base target="_top"&gt;
          &lt;link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;style&gt;
              .show {
                   display: block;
              }
              .hide {
                   display: none;
              }
           &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div&gt;
            &lt;p&gt;Search Profile&lt;/p&gt;
            &lt;input type="text" id="searchProfile" onkeyup="searchProfileHTML()" placeholder="Search for ..."&gt;
            &lt;div id="results" &gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;script&gt;
    function searchProfileHTML()
    {
      var x = document.getElementById("searchProfile").value;
      google.script.run
        .withSuccessHandler(createLinks)
          .searchProfile(x);
      function createLinks(result)
      {
        $('.links').remove();
        if (!x)
          return (0);
        $('#results').append('&lt;ul&gt;&lt;/ul&gt;');
        $('#results ul').addClass('links');
        result.forEach(function(el){
  //My Link to show/hide my Div
          $('.links').append('&lt;li&gt;&lt;a id="' + el[0] + '-link" href="#"&gt;' + el[0] + '&lt;/a&gt;&lt;div id="' + el[0] + '" class ="hide" &gt;&lt;/div&gt;&lt;/li&gt;');
  //My div with all the infos (hidden by default)
          $('#' + el[0]).append(""
          + '&lt;img src="' +  el[14] + '" height="100" width="100"&gt;'
          + "&lt;div&gt;"
            + "&lt;ul&gt;"
              + "&lt;li&gt;Name: "+ el[0] + "&lt;/li&gt;"
              + "&lt;li&gt;Full name: "+ el[1] + "&lt;/li&gt;"
              + "&lt;li&gt;Description : "+ el[2] + "&lt;/li&gt;"
              + "&lt;li&gt;email: "+ el[3] + "&lt;/li&gt;"
            + "&lt;/ul&gt;"
          + "&lt;/div&gt;");
          $('#' + el[0] + '-link').on("click", function(){
            $('#' + el[0]).toggleClass("hide show");
          })
        });
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>Anyone has an idea how I can make this more lite?</p>