Как сделать поиск по странице в Тильде

<div class="searchwrap">
    <input type="text" id="searchInput" placeholder="Введите текст для поиска">
    <button id="clearButton">✖</button>
    <button id="searchButton">Найти</button>
</div>

<style>
/* Фиксация Zero с поиском */
.uc-search {
  position: fixed;
  bottom: 0;
  top: auto;
  width: 100%;
  z-index: 999;
}

/* Стили для подсветки текста */
.current {
  border: 0px solid red;
  padding: 2px 5px;
  border-radius: 5px;
  background-color: black !important;
}
.highlight {
  background-color: grey;
  color: white;
  font-weight: 600;
}
/* Стили для формы поиска */
.searchwrap {
  display: flex;
  column-gap: 2%;
}
input#searchInput {
  width: 70%;
  padding: 10px 20px;
  font-family: 'TildaSans';
  font-size: 16px;
  background: #dfe1e8;
  border: none !important;
  border-radius: 10px;
}
#searchButton {
  height: 50px;
  width: 25%;
  background: black;
  border: none;
  border-radius: 10px;
  color: white;
  font-family: 'TildaSans';
  font-size: 16px;
  cursor: pointer;
}
#clearButton {
  position: absolute;
  top: 2px;
  right: 30%;
  left: auto;
  margin-top: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 100;
}
</style>

<script>
$(document).ready(function() {
  var searchInput = $('#searchInput');
  var searchButton = $('#searchButton');
  var clearButton = $('#clearButton');
  var contentDiv = $('#allrecords');
  var searchTimer;
  var currentMatch = 0;

  function searchAndHighlight() {
    var searchText = searchInput.val().trim();
    contentDiv.removeHighlight();
    if (searchText !== '') {
      var matches = contentDiv.highlight(searchText);
      if (matches.length > 0) {
        currentMatch = 0;
        scrollToMatch(currentMatch);
      } else {currentMatch = -1}
    } else {currentMatch = -1}
  }

  function scrollToMatch(index) {
    var matches = contentDiv.find('.highlight');
    if (index >= 0 && index < matches.length) {
      var match = $(matches[index]);
      $('html, body').animate({
        scrollTop: match.offset().top - 50
      }, 500);
      match.addClass('current');
    }
  }

  searchInput.on('input', function() {
    clearTimeout(searchTimer);
    searchTimer = setTimeout(searchAndHighlight, 500);
  });

  searchButton.on('click', function() {
    currentMatch++;
    scrollToMatch(currentMatch);
  });

  clearButton.on('click', function() {
    searchInput.val('').focus();
    contentDiv.removeHighlight();
    currentMatch = -1;
  });
});

(function($) {
  $.fn.highlight = function(pat) {
    function innerHighlight(node, pat) {
      var skip = 0;
      if (node.nodeType === 3) {
        var pos = node.data.toUpperCase().indexOf(pat);
        if (pos >= 0) {
          var spanNode = document.createElement('span');
          spanNode.className = 'highlight';
          var middleBit = node.splitText(pos);
          var endBit = middleBit.splitText(pat.length);
          var middleClone = middleBit.cloneNode(true);
          spanNode.appendChild(middleClone);
          middleBit.parentNode.replaceChild(spanNode, middleBit);
          skip = 1;
        }
      } else if (node.nodeType === 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
        for (var i = 0; i < node.childNodes.length; ++i) {i += innerHighlight(node.childNodes[i], pat)}
      }
      return skip;
    }
    return this.each(function() {innerHighlight(this, pat.toUpperCase())});
  };

  $.fn.removeHighlight = function() {
    return this.find('span.highlight').each(function() {
      this.parentNode.firstChild.nodeName;
      with (this.parentNode) {
        replaceChild(this.firstChild, this);
        normalize();
      }
    }).end();
  };
})(jQuery);
</script>