# Prevent Search Box from opening on UI when using searchText

**URL:** <https://pdfjs.community/t/prevent-search-box-from-opening-on-ui-when-using-searchtext/2031>\
**Category:** Technical Support\
**Created:** [September 15, 2022, 8:14am UTC](https://pdfjs.community/t/prevent-search-box-from-opening-on-ui-when-using-searchtext/2031 "2022-09-15T08:14:21Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![dcheli](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@dcheli](https://pdfjs.community/u/dcheli)\
**Post date:** [September 15, 2022, 8:14am UTC](https://pdfjs.community/t/prevent-search-box-from-opening-on-ui-when-using-searchtext/2031/1 "2022-09-15T08:14:21Z")

</div>

**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}

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [September 15, 2022, 8:14am UTC](https://pdfjs.community/t/prevent-search-box-from-opening-on-ui-when-using-searchtext/2031/3 "2022-09-15T08:14:25Z")

</div>

**Hello, I’m Ron, an automated tech support bot 🤖**

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

Guides:
- [Add Link to Annotations - Use WebViewer UI to Add Links to Annotations](https://pdfjs.express/documentation/annotation/add-link-to-annotation.8#use-webviewer-ui-to-add-links-to-annotations)
- [Hiding/Showing DOM elements in WebViewer UI - Find data-element attribute values](https://pdfjs.express/documentation/ui-customization/hiding-elements#find-data-element-attribute-values)
- [Create annotations - Programmatically](https://pdfjs.express/documentation/annotation/create-annotations#programmatically)

APIs:
- [UndefineddocumentLoaded](https://pdfjs.express/api/namespaces.list.html#event:documentLoaded__anchor)
- [UI.TabManager - setActiveTab(tabId [, saveCurrentActiveTabState])](https://pdfjs.express/api/UI.TabManager.html#.setActiveTab__anchor)
- [Core.Tools.RedactionCreateTool - enableAutoSizedText()](https://pdfjs.express/api/Core.Tools.RedactionCreateTool.html#enableAutoSizedText__anchor)

Forums:
- [Programmatically highlight text upon searching](https://pdfjs.community/t/programmatically-highlight-text-upon-searching/71/1)
- [Highlight tool trigger as left click](https://pdfjs.community/t/highlight-tool-trigger-as-left-click/1664/1)
- [Highlight Searched Text](https://pdfjs.community/t/highlight-searched-text/1683/1)

  
  

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](https://utm.guru/ueQNw)

---

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [September 15, 2022, 4:56pm UTC](https://pdfjs.community/t/prevent-search-box-from-opening-on-ui-when-using-searchtext/2031/4 "2022-09-15T16:56:04Z")

</div>

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](https://pdfjs.express/api/UI.html#.addSearchListener__anchor)  
You can then close the searchPanel with the closeElements function:

> **[Hide & Disable Buttons in PDF.js Express Viewer | Documentation](https://pdfjs.express/documentation/ui-customization/hiding-elements#opening/closing-elements-programmatically)**

So you can do something like this:

```javascript
  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:

> **[Basic searching | Documentation](https://pdfjs.express/documentation/search/basic-search.8#changing-highlight-colors)**

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](https://utm.guru/ueQNw)

---

<div class="post-metadata">

**Author:** ![dcheli](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@dcheli](https://pdfjs.community/u/dcheli)\
**Post date:** [September 17, 2022, 2:29pm UTC](https://pdfjs.community/t/prevent-search-box-from-opening-on-ui-when-using-searchtext/2031/5 "2022-09-17T14:29:52Z")

</div>

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']);

```

---

<div class="post-metadata">

**Author:** ![kkim](https://avatars.discourse-cdn.com/v4/letter/k/3ab097/32.png) [@kkim](https://pdfjs.community/u/kkim)\
**Post date:** [September 19, 2022, 2:53pm UTC](https://pdfjs.community/t/prevent-search-box-from-opening-on-ui-when-using-searchtext/2031/6 "2022-09-19T14:53:28Z")

</div>

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](https://pdfjs.express/api/UI.html#.toggleElement)

So you can call it right after searching:

```javascript
    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](https://utm.guru/ueQNw)

---

<div class="post-metadata">

**Author:** ![dcheli](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@dcheli](https://pdfjs.community/u/dcheli)\
**Post date:** [September 19, 2022, 9:37pm UTC](https://pdfjs.community/t/prevent-search-box-from-opening-on-ui-when-using-searchtext/2031/7 "2022-09-19T21:37:25Z")

</div>

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