Blog: Viewing

agsdix-fas fa-home

Blog: Home

agsdix-fas fa-pen-fancy

Blog: CEO's Corner

agsdix-fas fa-code

Blog: Tech Talk

Blog: Product Releases

agsdix-fas fa-chalkboard-teacher

Blog: Viewing

Blog: Conversion

arrow left circle icon Blog: Viewing

Configure Text Search in VirtualViewer with New API Sample

by | May 21, 2013

Recently, Snowbound added Text Search to our HTML5 VirtualViewer AJAX. It’s just one of many new features we have brought to VirtualViewer over the past year. And while we are very proud of our UI design and the sophisticated functionality we provide, we also understand that our customers have unique needs and perhaps different interface and functionality preferences. Because of this, we have always provided customers with code samples to configure the viewer for their desired user experience.

For the latest text search release in VirtualViewer, Snowbound is making things even easier for customers by providing them with entire new JavaScript samples to customize their own search interface. The specific code* snippet (seen below) is responsible for adding a text field (as well as buttons to initiate and cancel a search) to the right of the “help” button in the upper toolbar of the viewer, but with the code the customer can simply add the text field anywhere on the page they would like.

var insertSearchBar = function () {
    $('<input id="vvCustomSearch" type="text">').insertAfter("#about");
    $('<input id="vvCustomSearchStart" type="button" value="Go" />').insertAfter("#vvCustomSearch");
    $('<input id="vvCustomSearchCancel" type="button" value="Cancel" />').insertAfter("#vvCustomSearchStart");

    $("#vvCustomSearch").css("float", "left");
    $("#vvCustomSearchStart").css("float", "left");
    $("#vvCustomSearchCancel").css("float", "left");

    $("#vvCustomSearchStart").click(function (e) {
        var searchTerm = $("#vvCustomSearch").val();

        myFlexSnap.searchText(searchTerm);
    });

    $("#vvCustomSearchCancel").click(function (e) {
        myFlexSnap.cancelCurrentSearch();
    });

    $("#vvCustomSearch").bind("keyup", function (e) {
        var searchTerm = $("#vvCustomSearch").val();

        if (e.which === 10 || e.which === 13) {
            myFlexSnap.searchText(searchTerm);
        }
    });
}();

*This code assumes jQuery is available, but you could easily rewrite it to eliminate the dependency on jQuery.

Along with searchText, there are also six other available API methods involving search that customers can easily configure to their needs:

  • isDocumentSearchable – returns true if the document is searchable and false if not
  • cancelCurrentSearch – cancels the current search
  • clearSearchResults – clears all search results from both the document and the thumbnails
  • nextSearchResult – tabs to the subsequent search result
  • previousSearchResult – tabs to the previous search result