Using Search API from Code

// Viewer instance: Represents the PDF viewer instance used for document rendering and interaction.
var viewer;

// Initialize an array to store search results: Keeps track of search results for further processing or display.
var searchResults = [];

// Execute code when the window has fully loaded:
window.onload = async function () {
    //DsPdfViewer.LicenseKey = "***key***";
    viewer = new DsPdfViewer('#viewer', { restoreViewStateOnLoad: false });
    viewer.addDefaultPanels();

    var pdf = "/document-solutions/javascript-pdf-viewer/demos/product-bundles/assets/pdf/wetlands.pdf";

    // Open the document and set the zoom mode to 1 (Fit Width):
    await viewer.open(pdf);
    viewer.zoom = { mode: 1 };

    // Specify search options to find the text 'wetlands' with case sensitivity:
    var findOptions = { Text: 'wetlands', MatchCase: true };

    // Perform the search using the Search API:
    var searchIterator = await viewer.searcher.search(findOptions);

    // Iterate through search results and populate the searchResults array:
    var searchResult = await searchIterator.next();
    while (!searchResult.done) {
        searchResults.push(searchResult);
        searchResult = await searchIterator.next();
    }

    // Call the paintPopups function to render popups above search results:
    paintPopups();   

    viewer.scrollView.addEventListener("pointerdown", paintPopups);
    viewer.scrollView.addEventListener("pointerup", () => setTimeout(paintPopups));
    viewer.scrollView.addEventListener("scroll", paintPopups);
    window.addEventListener("resize", () => setTimeout(paintPopups));
}

// Function to render popup elements above search results.
function paintPopups() {
    removeAllRectangles();
    for (let i = 0; i < searchResults.length; i++) {
        const searchResultValue = searchResults[i].value;
        createRectangle(viewer.convertPdfRectToWindowCoordinates(searchResultValue.PageIndex, searchResultValue.ItemArea), searchResultValue.DisplayText);
    }
}


// Function to create a rectangle with a wavy border
function createRectangle(rect, displayText) {
    const waveBorder = document.createElement('div');
    const animatedWave = document.createElement('div');

    waveBorder.className = 'wave-border';
    animatedWave.className = 'animated-wave';

    const [x1, y1, x2, y2] = rect;
    const width = x2 - x1;
    const height = y2 - y1;

    waveBorder.style.left = x1 + 'px';
    waveBorder.style.top = y1 + 'px';
    waveBorder.style.width = width + 'px';
    waveBorder.style.height = height + 'px';

    waveBorder.title = "Display text: " + displayText;

    document.body.appendChild(waveBorder);
    waveBorder.appendChild(animatedWave);
}

// Function to remove all previously added rectangles
function removeAllRectangles() {
    const waveBorders = document.querySelectorAll('.wave-border');
    waveBorders.forEach((waveBorder) => {
        waveBorder.remove();
    });
}