Prevent Search Box from opening on UI when using searchText

Technical Support
1

Which product are you using?
PDF.js Express Plus

PDF.js Express Version
8

Detailed description of issue
In my use case, on the documentLoaded event, I am initiating a search for a particular pattern, using the below method:

instance.UI.searchText(searchPattern, searchOptions);

The UI behavior is that the Search Box open, displaying the searchPattern and the found text is highlighted.

Is there a setting to not open the Search Box in the UI and not highlight the text. What I’m trying to do is find the text, get it’s position and draw an annotation.
Thanks

Expected behaviour
{Provide a screenshot or description of the expected behaviour}

Does your issue happen with every document, or just one?
{Answer here}

Link to document
{Provide a link to the document in question if possible}

Code snippet
{Provide a relevant code snippet}

3

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:

Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

4

Hello dcheli,

There is an API you can use to trigger an event when a search has been completed:
https://pdfjs.express/api/UI.html#.addSearchListener__anchor
You can then close the searchPanel with the closeElements function:

So you can do something like this:

  const { documentViewer, annotationManager } = instance.Core;

  documentViewer.addEventListener('documentLoaded', () => {
    
    const searchListener = () => {
      console.log('finished searching, closing search Panel');
      instance.UI.closeElements(['searchPanel'])
    }
    instance.UI.addSearchListener(searchListener);

    const searchValue = 'important'
    instance.UI.searchText(searchValue);
  })

And here is the guide on changing highlight colours:

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

5

Thanks Kevin, while I can work with this solution, ideally, I’d like to prevent the search box from opening all together.
The effect of using instance.UI.closeElements() is that by default the search box opens, then when closeElements() is called, you can see it closing.

What your solution actually made me think of, which works for me, is to add ‘SearchPanel’ to my instance.disableElements([‘SearchPanel’]) list.
Then enable it later for manual searching. So after my search is completed, I added this.

instance.UI.enableElements(['searchPanel']);
instance.UI.closeElements(['searchPanel']);
6

Hi dcheli,

I noticed that we also have access to the toggleElement API that you may find to be faster:
https://pdfjs.express/api/UI.html#.toggleElement

So you can call it right after searching:

    const searchValue = 'important'
    instance.UI.searchText(searchValue);
    instance.UI.toggleElement('searchPanel')

Best Regards,
Kevin Kim
Web Development Support Engineer
PDFTron Systems, Inc.


Share how you are using PDF.js Express in your organization you could win a $500 Amazon gift card. All participants will receive 6 months of PDF.js Express+ for free. Learn more here

7

Kevin,
This is a MUCH MORE Elegant solution. Thanks for pointing that out