resources/find-in-page/search-incremental.html

<!DOCTYPE html>
<style>
.spacer {
  height: 5000px;
}
.scroller {
  height: 1px;
  overflow: scroll;
  font-size: 1px;
}
</style>

<canvas id=outputcanvas width=1000 height=100></canvas>

<script>
const elements = [];
const characters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', '[', ']', '{', '}', '\\', '|', '/', '?', ',', '.', '<', '>', ':', ';', "'", '"'];
let searchText = '';

let scroller = null;

function createAndAppendScroller() {
  scroller = document.createElement('div');
  scroller.classList.add('scroller');
  scroller.addEventListener('scroll', updateResult);

  elements.length = 0;

  for (let i = 0; i < characters.length; i++) {
    const spacer = document.createElement('div');
    spacer.classList.add('spacer');

    const content = document.createElement('span');
    content.textContent = searchText + characters[i];
    elements.push(content);

    scroller.appendChild(spacer);
    scroller.appendChild(content);
  }

  document.body.appendChild(scroller);
}

onload = () => {
  createAndAppendScroller();
  updateCanvas();
};

function updateCanvas() {
  const context = outputcanvas.getContext('2d');
  context.fillStyle = 'white';
  context.fillRect(0, 0, 1000, 1000);
  context.fillStyle = 'black';
  context.font = '12px arial';
  context.fillText('search for something with ctrl+f', 10, 10);
  if (searchText) {
    context.fillText('search text:', 10, 40);
    context.fillText(searchText, 10, 60);
  }
}

function updateResult() {
  const bucket = Math.floor(scroller.scrollTop / 5000) - 1;
  if (bucket >= 0 && bucket < characters.length) {
    searchText += characters[bucket];
    console.log('searchText: ' + searchText);

    updateCanvas();

    const oldScroller = scroller;
    createAndAppendScroller();
    oldScroller.remove();
  }
}
</script>