Edit online

How to Implement a Custom Search Filter

It is possible to implement a custom search filter (search input component) in your WebHelp Responsive output. The search input component is where users enter search queries to locate certain content within the WebHelp output.

To integrate a custom search filter, follow these steps:

If you have not already created a Publishing Template, see How to Create a Publishing Template.
Create the following items in the folder that contains your publishing descriptor file (the .opt file):
- A folder named js.
- A folder named fragments.
In the js folder, create a file named search-filter.js.

As a starting point, you can copy the following content to the search-filter.js file:

/**
 * Object that implements the methods required by WebHelp to run a search filter.
 */
function CustomSearchFilter() {

    /**
     * Method required to run the search filter in webhelp. It is called when the users 
     * executes the query in the search page. 
     * 
     * @param {WebHelpAPI.SearchResult} searchResult The search result for the executed query.
     *
     * @return A list of WebHelpAPI.SearchResult objects
     */
    this.filterResults = function (searchResult) {
        // implement filter
        return filteredResults;
    }
}

// Set the Search Filter to WebHelp
WebHelpAPI.setCustomSearchFilter(new CustomSearchFilter());
...

Note: See the API Search Objects section for details on how to create a WebHelpAPI.SearchResult object.

Implement your custom search filter.
In the fragments folder, create a file named search-filter-script-fragment.xml.
In the search-filter-script-fragment.xml file, define the scripts that are required for your custom search filter to run. For example:
```
<div>
    <script src="${oxygen-webhelp-template-dir}/js/search-filter.js"></script>
</div>
```
Copy the js folder to the output folder during the transformation process. For this, open the .opt file and add the following content in the <resources> section (see Template Resources for more details):
```
<fileset>
  <include name="js/**"/>
</fileset>
```
Set the transformation parameters needed to enable the custom search filter. For this, open the .opt file and add the following content inside the <webhelp> element:
```
<html-fragments>
  <fragment file="fragments/search-filter-script-fragment.xml" 
      placeholder="webhelp.fragment.head.search.page"/>
</html-fragments>
```
Run the transformation with this publishing template selected.