update search page

            <h1>Smart Applications REFerence Ontology, and extensions</h1>

            <p><strong>Official ETSI portal for SAREF</strong><br>This portal contains pointers to the SAREF ontologies and SAREF-related work items</p>

            <form method="GET" action="search.html">

              <input class="form-control" id="q" name="q" placeholder="&#x1F50E; ex., device"/>

              <input class="form-control" id="search" name="q" placeholder="&#x1F50E; ex., device" style="font-weight:600;font-size:150%"/>

            </form>

          </div>

        </div>

  if(!urlParams.has('q')) {

    return;

  }

  var p;

  if(!urlParams.has('p')) {

    p=1;

  var q = urlParams.get('q');

  $("#q").attr("value", q);

  $("#search").attr("value", q);

  var page;

  if(!urlParams.has('page')) {

    page=1;

  } else {

    p = urlParams.get('p')

  }

   var ds="/api/search?q="+q+"&p="+p;

   if(q) {

     $("<h1> The results for <em>"+q+"</em>:</h1><div id=\"resultsDIV\"></div>").appendTo("#results");

    page = urlParams.get('page')

  }

   var ds="/api/search?q="+q+"&page="+page;

   $.getJSON(ds, function(data){

     if(data.count==0){

       $("<div> <h2>Sorry there is no result</h2> </div>").appendTo("#resultsDIV");

       $("<div> <h2>Sorry there is no result</h2> </div>").appendTo("#results");

     }

     else{

      $(`<p>Result ${data.offset+1} to ${Math.min( data.offset + 20 , data.count ) } (${data.count} total)</p>`).appendTo("#results");

      var prevDisabled = "";

      if(Math.round(data.offset/20) <= 0) {

        prevDisabled = " disabled";

      }

      var nextDisabled = "";

      if(data.offset + 20 > data.count) {

        nextDisabled = " disabled";

      }

      var nav = `<nav aria-label="Page navigation example">

  <ul class="pagination">

    <li class="page-item${prevDisabled}"><a class="page-link" href="?q=${q}&page=${Math.round(data.offset/20)}">Previous</a></li>

    <li class="page-item"><a class="page-link" >${Math.round(data.offset/20)+1}</a></li>

    <li class="page-item${nextDisabled}"><a class="page-link" href="?q=${q}&page=${Math.round(data.offset/20)+2}">Next</a></li>

  </ul>

</nav>`;

      $(nav).appendTo("#results");

      $.each(data["results"], function(key, value){

          $("<div> <a href ="+value.uri+">"+value.label+"</a></div>").appendTo("#resultsDIV");

          $("<div>"+value.comment+"</div>").appendTo("#resultsDIV");

        var term = value.term;

        console.log(term);

        if(term != null) {

          console.log("is not null");

          var html =  `<p><strong><a href="${term.uri}">${term.prefixedIri}</a> (${term.label})</strong><br/>

          <em>Defined in <a href="${term.ontologyIri}">${term.ontologyName}</a> as:</em> ${term.comment != null ? term.comment : "<em>(no description)</em>"}</p>`;

          $(html).appendTo("#results");

        }  

      });

      $("<div> <span><a href=\"q="+q+"&p="+(p-1)+"\">previous</a></span> - <span>offset: "+data["offset"]+"</span> - <span> count: "+data["count"]+" </span> - <a href=\"q="+q+"&p="+(p+1)+"\">next</a></span></div>").appendTo("#resultsDIV");

      $(nav).appendTo("#results");

    }

   });

});