_layouts/search.html

<!DOCTYPE html>
<head>
    {% include head.html %}

    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    </script>
    {% if page.datatable == true %}
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function(){

            $('table.datatable').DataTable( {
                        paging: false,
                        stateSave: true
                    }
            );
        });
    </script>
    {% endif %}

</head>
<body>
{% include topnav.html %}
<!-- Page Content -->
<div class="container">
    <!-- Content Row -->
    <div class="row">
        <!-- Content Column -->
        <div class="col-md-8 col-md-offset-2 col-sm-12">
            <h1>Search Results</h1>
            <div class="results">
              <img src="/images/LB_Preloader.gif" alt="Loading">
            </div>
        </div>
        <!-- /.row -->
</div>
<!-- /.container -->
    </div>

<script>
  // List of HTML entities for escaping.
  var htmlEscapes = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#x27;',
    '/': '&#x2F;'
  };

  // Regex containing the keys listed immediately above.
  var htmlEscaper = /[&<>"'\/]/g;

  // Escape a string for HTML interpolation.
  
  function escapeHTML(string) {
    string = ('' + string).replace(htmlEscaper, function(match) {
      return htmlEscapes[match];
    });
    // Undo <em></em> -- used to highlight matches
    string = string.replace(/&lt;em&gt;/g, '<em>');
    return string.replace(/&lt;&#x2F;em&gt;/g, '</em>');
  };

  $(document).ready(function() {
    var query = window.location.href.slice(window.location.href.indexOf('?') + 1);

    if (query && query.length > 0) {
      var split = query.split('&');
      var queryObj = {};
      split.forEach(function(s) {
        queryObj[s.split('=')[0]] = s.split('=')[1];
      });
    }

    $('.search-bar').val(queryObj.q.replace('+', ' '));
    
    if(queryObj.sidebar && queryObj.sidebar !== "") {
        $('input[name="sidebar"]').val(queryObj.sidebar);
    }

    var urlBase = "https://us-south.functions.cloud.ibm.com/api/v1/web/dhmlau%40ca.ibm.com_dev/default/search.json?";
    var url = urlBase + query;

    $.get(url).done(function(data) {
      if (!data.status) {
        $('.results').html('<h3>' + escapeHTML(data.msg) + '</h3>');
      } else {
        var html = '<ul class="resultList">'
        data.results.forEach(function(res) {
          if (!res.highlight.text) {
            res.highlight.text = []
          }
          res.highlight.text.forEach(function(t) {
            t = escapeHTML(t);
          });

          var displayedTitle = escapeHTML(res.extracted_metadata.title);
          displayedTitle = displayedTitle.slice(0, displayedTitle.indexOf('|')!=-1? displayedTitle.indexOf('|'): displayedTitle.length);
          
          html += '<li><a class="title" href="' + escapeHTML(res.metadata.source.url) + '">' + displayedTitle + '</a><br/>';
          html += '<a class="link" href="' + escapeHTML(res.metadata.source.url) + '">' + escapeHTML(res.metadata.source.url) + '</a>';
          html += '<p>' + res.highlight.text.splice(0, 3).join('<br/>') + '</p></li>';
        });
        html += '</ul>';

        // Page Index
        var pages = Math.floor(data.matching_results / 10);
        var offset = 0;
        if (queryObj.offset) {
          offset = Number(queryObj.offset);
        }

        html += '<ul class="pagination">'

        for (var i=0; i<pages; i++) {
          queryObj.offset = i*10;
          var page = i + 1;
          var active = Math.floor(offset / 10) == i ? 'active' : '';

          html += '<li class="' + active + '"><a href="/search?' + $.param(queryObj) + '">' + page + '</a></li>';
        }

         $('.results').html(html);
      }
    });
  })
</script>
</body>

</html>