Execute Search functionality on Enter

Product: Web viewer

Product Version: 8.12.0

Please give a brief summary of your issue:
I need to prevent search functionality to be executed on keypress

Please describe your issue and provide steps to reproduce it:
I use ReactJS. I use overrideSearchExecution() method as below

regex option is enabled when we execute searchTextFull().

In searchHandler method we call an API to get the regex form of search value.
for eg: if I type "carbon fibers " the API will return “carbon fibers | fibers. | carbon fiber | carbon carbon”
So I execute instance.UI.searchTextFull() with the API response value.

But the problem is what I face is on each keypress this API getting called. Which is not the right approach.

So I am thinking to prevent invoking overrideSearchExecution() on keypress. Instead let us invoke on Enter. Is there any option available to achieve this?

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

Hello team,
The behavior I want is to make the UI only search once the whole word has been entered.

Any update?

Hi P.kk,

Thank you for contacting us regarding Webviewer.

From you description, I assume you are looking for debounce?

You could check webviewer-ui/SearchOverlay.js at 10.1 · PDFTron/webviewer-ui · GitHub as a reference. We’re using the debounce function from lodash, but this could be replaced by your own implementation as well.

Please let us know if this resolves your issue, thank you.

Hi Johny,
I use overrideSearchExecution(). On each keypress this method is getting invoked. Which results in calling API too.
The example you have shown is something custom search panel right?
Is there any other solution with this overrideSearchExecution() invoke only after we enter the whole word?

Hi p.kk,

Thank you for providing the information.

The overrideSearchExecution method replace the default search function in the search input as in the screenshot.

To prevent the search function gets triggered every time when a new value is entered, there’s already a wait time in the debounce function at the line of code I pasted in the previous reply. The default wait time is 300ms, but this probably doesn’t meet your need.

You could use the following code:

let debounceTime = 4000;
let shouldDebounce = false;
let setupTimeOut;

function searchDebounce(searchValue, options) {
    if (!shouldDebounce) {
        shouldDebounce = true;
        setupTimeOut = setTimeout(() => {
            shouldDebounce = false;
            console.log('shouldDebounce = false');
        }, debounceTime);
        console.log('searchValue', searchValue);
        // invoke your API for searching here.
    if (shouldDebounce) {
        setupTimeOut = setTimeout(() => {
            shouldDebounce = false;
            console.log('shouldDebounce = false');
        }, debounceTime);


Another way is to fork from our UI project: GitHub - PDFTron/webviewer-ui: WebViewer UI built in React and modify the waitTime for debouncing at webviewer-ui/SearchOverlay.js at 10.1 · PDFTron/webviewer-ui · GitHub

Please let us know if this resolves your issue, thank you.

Hi Johnny,

Thanks for the response. I tried your example and I can tell you that it works but the wait time can not be the accurate solution for me. I will say why

  1. I search for “carbon fiber”.
  2. I implemented your code. When I call an API for “carbon fiber” it returns the regex value as carbon fibers | fibers. | carbon fiber | carbon carbon
  3. So we need to look for these value in the document
  4. I call instance.UI.searchTextFull() with this value(means the API returned value)

So the problem is whenever we type something we call the API and once we call searchTextFull the search box will be filled with these regex values like ‘carbon fibers | fibers. | carbon fiber | carbon carbon’

Can it possible the search panel look like as the image below

So we will have a search Icon and On clik of that will call invoke the search action

Hi p.kk,

Thank you for the information.

I think the only way is to customize the UI in this case. Then you can implement your own icon and logic to ensure the search function only triggered after clicking “Enter” or clicking the icon.

You could check our open-source UI project at GitHub - PDFTron/webviewer-ui: WebViewer UI built in React. After building it, you will need to move it to the Webviewer’s folder.

Hi Johnny,

I use webviewer in my repo. The one you shared is the source code of your UI for the WebViewer SDK.
But I just install webviewer package and initiate and load the document. It just shows all the UI and search panel. So my doubt is that in this case , is it possible to change the search panel style as shown above.
Because there is no point in working in the repository you shared for me.

Hi p.kk,

Webviewer consists of two parts: the UI and the core. The UI parts comes from the open source project that I shared with you and uses the Core API to function in Webviewer. You can customize and change the styling there and build it. Then move the built file into your Webviewer folder (if you are using NPM to install, then it would be in the node_modules folder) and replace the default UI. I believe this is the only way to achieve what you want.