Programmatic search with WebViewer

Besides the basic text search functions from WebViewer UI , WebViewer provides methods for more low level control of text search. They are:

• textSearchInit: Start a search or search for the next occurrence of a search term
• clearSearchResults: Clear highlighted search results
• displaySearchResult: Highlight result, unhighlight previous result
• displayAdditionalSearchResult: Highlight additional result
• setActiveSearchResult: Go to search result and highlight it with 'active' color
• setSearchHighlightColors: Set highlight colors of search results
• searchInProgress: Event fired when a search starts or ends

The textSearchInit function is used to start a text search and the displaySearchResult, displayAdditionalSearchResult, and setActiveSearchResult functions are used to highlight the results. An example of textSearchInit being used can be seen below:

WebViewer({ ... }, viewerElement).then(instance => {
  const { documentViewer, Annotations, Search } = instance.Core;

  documentViewer.setSearchHighlightColors({
    // setSearchHighlightColors accepts both Annotations.Color objects or 'rgba' strings
    searchResult: new Annotations.Color(0, 0, 255, 0.5),
    activeSearchResult: 'rgba(0, 255, 0, 0.5)'
  });

  documentViewer.addEventListener('documentLoaded', () => {
    const searchText = 'TEXT TO SEARCH';
    const mode = Search.Mode.PAGE_STOP | Search.Mode.HIGHLIGHT;
    const searchOptions = {
      // If true, a search of the entire document will be performed. Otherwise, a single search will be performed.
      fullSearch: true,
      // The callback function that is called when the search returns a result.
      onResult: result => {
        // with 'PAGE_STOP' mode, the callback is invoked after each page has been searched.
        if (result.resultCode === Search.ResultCode.FOUND) {
          const textQuad = result.quads[0].getPoints(); // getPoints will return Quad objects
          // now that we have the result Quads, it's possible to highlight text or create annotations on top of the text
        }
      }
    };

    documentViewer.textSearchInit(searchText, mode, searchOptions);
  });
});

In the above code the textSearchInit method is used to search the document. It takes the following input parameters:

• searchPattern: A pattern to search for
• mode: A number that encodes the search options, generated by bitwise ORing options together
• searchOptions: An object that contains the search options.
• searchCallBack: A callback function that get called when a match has been found or at the end of document (or when using PAGE_STOP, at the end of a page)

The 'mode' value it takes in can be created by doing bitwise OR operations on the different SearchMode properties. The search modes are:

• CASE_SENSITIVE: Text must match the case of the search term
• SEARCH_UP: Search starts on the last page, and search backwards to first page
• PAGE_STOP: Search will invoke the callback function when it finishes searching a page
• HIGHLIGHT: Bounding box of found term will be included
• AMBIENT_STRING: Characters surrounding the search term will be included
• WHOLE_WORD: Text must be a whole word
• REGEX: Search text can contain regular expressions
• WILD_CARD: Search text can contain wildcards

When the callback function is called, it receives a SearchResults object that has a few useful properties. It has a 'resultCode' property, which has one of the following values

• ResultCode.PAGE: Reached the end of a page
• ResultCode.FOUND: Found a match
• ResultCode.DONE: Done searching the document

The searchResults will also have a 'quads' property that contains an array of textQuad objects. You can call the getPoints function on textQuad objects to receive a Quad object.