Highlight multiple Seach Results

WebViewer Version: 8.9.0

Please give a brief summary of your issue:
Highlighting multiple Seaches’ Results

Please describe your issue and provide steps to reproduce it:

Hello there,
I’m using WebViewer in a Vue.js app. I’m trying to highlight multiple searches’ results, but the viewer can only hightlight the results of the last search. Is there a way or an API I’m missing to solve my problem? Thank you!

Please provide a link to a minimal sample where the issue is reproducible:

let annotsToAdd = []
documentViewer.addEventListener('documentLoaded', () => {
  const mode = Search.Mode.PAGE_STOP | Search.Mode.HIGHLIGHT;
  const options = {
    fullSearch: true,
    onResult(result) {
      // console.log(result)
      if (result.resultCode === Search.ResultCode.FOUND) {
        const textQuad = result.quads[0].getPoints(); 
        const annot = new Annotations.TextHighlightAnnotation({
          PageNumber: result.pageNum,
          Quads: [textQuad],
        })
        annotsToAdd.push(annot);
        annotationManager.addAnnotation(annot);
        annotationManager.redrawAnnotation(annot);
      }
    }
  }
  documentViewer.textSearchInit('PDF', mode, options);
  console.log(annotsToAdd);
  documentViewer.textSearchInit('高亮', mode, options)
  console.log(annotsToAdd);
  annotationManager.drawAnnotationsFromList(annotsToAdd);
});

I thought using a list and redraw the highlight annotation at last would help. It turns out this is exactly the same as redraw on every results. Both of them display the last search’s result.

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Hello,

Thank you for contacting us about WebViewer. For your issue you can use the displayAdditionalSearchResults API, you’ll want to do something like the following

const { documentViewer, Search } = instance.Core;

documentViewer.addEventListener('documentLoaded', () => {
  const mode = Search.Mode.PAGE_STOP | Search.Mode.HIGHLIGHT;
  const results = [];
  let finishedFirstSearch = false;
  const options = {
    fullSearch: true,
    onResult(result) {
      if (result.resultCode === Search.ResultCode.FOUND) {
        results.push(result);
      }
    },
    onDocumentEnd: () => {
      if (!finishedFirstSearch) {
        finishedFirstSearch = true;
        documentViewer.textSearchInit('When', mode, options);
      } else {
        documentViewer.displayAdditionalSearchResults(results);
      }
    }
  }

  documentViewer.textSearchInit('PDF', mode, options);
});

Please let me know if the above works for you

Best Regards,
Andrew Yip
Software Developer
PDFTron Systems, Inc.

1 Like

THANKS SOOOO MUCH! This is exactly what I’m looking for. It works perfectly with my app! :smiling_face_with_three_hearts: :smiling_face_with_three_hearts: :smiling_face_with_three_hearts: