Alternate PDF UI Search Capabilities

WebViewer UI has a built-in search panel and provides an API for controlling the search UI. Launch Demo to see WebViewer search. The following functions can be used to interact with the text search:

• addSearchListener: Adds a function that is called whenever there is a match or when finishing a full search.
• removeSearchListener: Removes a search callback function.
• searchText: Searches and highlights the first instance of a search term. Can be called more than once to search for the next instance.
• searchTextFull: Searches for all instances of a search term. This also displays the search sidebar shown in the image below.

The following is an example of searchTextFull being used to search text and adding a searchListener callback to create annotations on top of the results.

1WebViewer({ ... }, viewerElement).then(instance => {
2  const { annotationManager, documentViewer, Annotations } = instance.Core;
3
4  const searchListener = (searchPattern, options, results) => {
5    // add redaction annotation for each search result
6    const newAnnotations = results.map(result => {
7      const annotation = new Annotations.RedactionAnnotation();
8      annotation.PageNumber = result.pageNum;
9      annotation.Quads = result.quads.map(quad => quad.getPoints());
10      annotation.StrokeColor = new Annotations.Color(136, 39, 31);
11      return annotation;
12    });
13
14    annotationManager.addAnnotations(newAnnotations);
15    annotationManager.drawAnnotationsFromList(newAnnotations);
16  };
17
18  documentViewer.addEventListener('documentLoaded', () => {
19    const searchPattern = 'text to search';
20    // searchPattern can be something like "search*m" with "wildcard" option set to true
21    // searchPattern can be something like "search1|search2" with "regex" option set to true
22
23    // options default values are false
24    const searchOptions = {
25      caseSensitive: true,  // match case
26      wholeWord: true,      // match whole words only
27      wildcard: false,      // allow using '*' as a wildcard value
28      regex: false,         // string is treated as a regular expression
29      searchUp: false,      // search from the end of the document upwards
30      ambientString: true,  // return ambient string as part of the result
31    };
32
33    instance.UI.addSearchListener(searchListener);
34    // start search after document loads
35    instance.UI.searchTextFull(searchPattern, searchOptions);
36  });
37});

After the document has been loaded, a searchListener callback function is added and searchTextFull is used to search the document. When calling searchTextFull, the searchListener callback is invoked once and receives an array of all the results (even if nothing was found). When using the searchText method, the searchListener callback will only be invoked if a result was found.

When the searchListener callback function is called, it'll receive the searchPattern and options used for the search and an array containing SearchResults objects. In the example above, it creates redaction annotations on top of the matching text to illustrate how SearchResults objects can be used.

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

• textSearchInit: Starts a search or search for the next occurrence of a search term.
• clearSearchResults: Clears highlighted search results.
• displaySearchResult: Highlights result, unhighlights previous result.
• displayAdditionalSearchResult: Highlights additional result.
• setActiveSearchResult: Goes to search result and highlights it with 'active' color.
• setSearchHighlightColors: Sets highlight colors of search results.
• searchInProgress: Fires event 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.

The following is an example of textSearchInit being used:

1WebViewer({ ... }, viewerElement).then(instance => {
2  const { documentViewer, Annotations, Search } = instance.Core;
3  documentViewer.setSearchHighlightColors({
4    // setSearchHighlightColors accepts both Annotations.Color objects or 'rgba' strings.
5    searchResult: new Annotations.Color(0, 0, 255, 0.5),
6    activeSearchResult: 'rgba(0, 255, 0, 0.5)'
7  });
8  documentViewer.addEventListener('documentLoaded', () => {
9    const searchText = 'TEXT TO SEARCH';
10    const mode = [Search.Mode.PAGE_STOP, Search.Mode.HIGHLIGHT];
11    const searchOptions = {
12      // If true, a search of the entire document will be performed. Otherwise, a single search will be performed.
13      fullSearch: true,
14      // The callback function that is called when the search returns a result.
15      onResult: result => {
16        // with 'PAGE_STOP' mode, the callback is invoked after each page has been searched.
17        if (result.resultCode === Search.ResultCode.FOUND) {
18          const textQuad = result.quads[0].getPoints(); // getPoints will return Quad objects
19          // Now that we have the result Quads, it's possible to highlight text or create annotations on top of the text.
20        }
21      }
22    };
23    documentViewer.textSearchInit(searchText, mode, searchOptions);
24  });
25});

In the code above, 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 gets 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 completing 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 searches backwards to the first page.
• PAGE_STOP: Search invokes 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.