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
instance.UI.overrideSearchExecution(searchHandler);
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:
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?
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) {
clearTimeout(setupTimeOut);
setupTimeOut = setTimeout(() => {
shouldDebounce = false;
console.log('shouldDebounce = false');
}, debounceTime);
}
};
instance.UI.overrideSearchExecution(searchDebounce);
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
I search for “carbon fiber”.
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
So we need to look for these value in the document
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
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.
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.
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.
