WebViewer: Disable search on keypress

WebViewer Version: 8.10.0

We are using an external search intergration by following the example given in the link below. We have noticed that the execute search is being executed on every key press. This causes excessive calling to our backend api to perform the search. Is there a way to disable doing the search execution on key press and only execute search on enter?

The reason why we are using external search integration is because we are using the .xod to stream the pdfs to the client. The PDFs that we work with are in the 3K+ page range. Doing the native search with .xod streaming is not performant so we are trying to integrate with a backend search engine to solve for this.

Thanks,

Hi Jade Lucas,

Thank you for contacting WebViewer support.
Just to confirm, the example you followed was this one (link)?
Before you give me this answer so I can investigate this better for you, I’ll give a suggestion and you can check if this works for you.
You can listen to the keyDown event of Document Viewer and continue with the search only if the pressed key was the Enter key.

Best,

Dandara Navarro
Web Software Developer
Apryse

While we followed the example provided, there are some differences. In the example, coordinate information is returned from the backend, whereas our backend only returns the page number and ambient string. As a result, we disabled the search button and built our own search component/control. With our control, the user clicks search, and we call our backend search engine to retrieve the page number and ambient string. We then loop through each page returned by the search engine, perform a programmatic search, and highlight the results. However, we’ve encountered a couple of issues with the programmatic search, navigation, and highlighting. We’re hoping to receive some assistance in resolving these issues.

  1. When a user clicks on a search result in our custom component, we call the setCurrentPage() method. However, when we do this, the pages in the viewer become left-aligned for some reason. If the outline panel or any other panel is opened, the pages go back to center alignment. We want to keep the pages centered in the viewer, but we’re not sure why calling this method causes them to snap from center alignment to left alignment. We’ve already tried calling the RefreshAll() and RefreshPage() methods, but they don’t appear to have any effect. Below is the method that gets called on the component result click event.
setActiveSearchResultItem(item: SearchResultModel){
    this.activeSearchResult = item;

    const { documentViewer } = this.wvInstance.Core;   
    
    documentViewer.setCurrentPage(item.pageNumber, true);
  }

  1. When we perform programmatic search and highlighting using documentViewer.textSearchInit(), the results and highlighting are correct on most pages. However, on some pages, the results are correct, but the result coordinates are way off. The strange thing is that sometimes refreshing the browser on the same document solves the problem. We only see this behavior with .xod files; we don’t encounter this issue with PDFs. We’re not sure if there’s a race condition occurring, or if there’s a better way to perform programmatic search and highlighting. Below is the code that gets executed when users click search in our custom component.
  async search(): Promise<void> {
    const {documentViewer, annotationManager} = this.wvInstance.Core
    
    this.clearHighlights();

    await this.getSearchResultsFromBackend();

    //Only do searches on pages that backend says that phrase exists on.
    let pagesToSearchInViewer = [...new Set(this.results.map((result) => result.pageNumber))];       

    for (const pageNumber of pagesToSearchInViewer) {
      await this.searchForTextInViewer(pageNumber, this.searchFor);
      if (pageNumber == documentViewer.getCurrentPage()){
        annotationManager.drawAnnotations({pageNumber:pageNumber})
      }      
    }   
  }
  ///search for the text for the passed in page and highlights it.
  //Based on https://docs.apryse.com/documentation/web/guides/advance-text-search/
  //Based on https://community.apryse.com/t/is-it-possible-to-use-textsearchinit-to-search-for-a-list-of-terms/4717/6
  searchForTextInViewer = (pageNumber: number, textToSearch: string) => {
    return new Promise<void>(resolve => {
      console.log('Search for text ' + textToSearch + ' on page ' + pageNumber)

      const { documentViewer, Search } = this.wvInstance.Core;
      let mode = Search.Mode.PAGE_STOP | Search.Mode.HIGHLIGHT;
      let options = {
        fullSearch: true,
        startPage: pageNumber,      
        endPage: pageNumber,

        onPageEnd: result => {
          console.log('Finish searching page.');
          console.log(result);
          resolve();
        },

        onError: error => {
          console.log('Error occurred while searching.');
          console.log(error);
        },  

        onResult: result => {
          console.log('Result while searching.');
          console.log(result);
          
          if (result.resultCode === Search.ResultCode.FOUND) {        
  
            //Seems like there is a bug in that the search results return to many decimal places for the highlight annotation quads.
            //Rounding to nearest seems to work.
            let quads: Core.Math.Quad[] = result.quads.map((coords: any) => {
              let point = coords.getPoints();

              //Rounding to get highlights to show. If left as is, no highlights show.
              return new this.wvInstance.Core.Math.Quad(
                Math.round(point.x1), 
                Math.round(point.y1), 
                Math.round(point.x2), 
                Math.round(point.y2), 
                Math.round(point.x3),
                Math.round(point.y3), 
                Math.round(point.x4),
                Math.round(point.y4))
            })
            this.highlightText(result.pageNum, quads);
          }
        }     
      };
      documentViewer.textSearchInit(textToSearch, mode, options);    
    })
  }
  highlightText(pageNumber: number, quads: Core.Math.Quad[]) : void {
    //Based on https://docs.apryse.com/documentation/web/guides/create-annotation-highlight/
    const { Annotations, annotationManager } = this.wvInstance.Core;

    const highlight = new Annotations.TextHighlightAnnotation();
      highlight.PageNumber = pageNumber;
      highlight.Quads = quads;
      highlight.StrokeColor = new Annotations.Color(255, 255, 0);
      highlight.Listable = false;

    annotationManager.addAnnotation(highlight);
    this.searchHighlights.push(highlight);
  }