In Page Search Term Highlighter

Version 1.0.8
Maturity Stable
Release Date 2019-09-30 00:00
Please login to access your purchased download.

  1. Upload the module using the standard Joomla extension install feature.

    In the Adminstrator backend select Extensions->Manage->Install



  2. Select the Upload Package File tab and upload the module zip file mod-inpage-search-highlighter.zip





  3. Once the module has successfully uploaded, it means that it has been installed.

  4. To activate the module navigate to Extensions->Modules and search for the In Page Search Term Highlighter module.

  5. Click on the In Page Search Term Highlighter name to open the configuration options.

  6. You should see a screen as indicated below, here you will be able to adjust the module according to your needs.




  7. Configuration - All options are explained below.


    • Search Box Placeholder - The text that appears in the search text box. If left blank, not default text will load in the search text box.


    • Search Type - Whether this should be a normal search input box as the standard input box by Joomla. Or if it should be fixed/ floating, meaning it will always show at the top of the page.


    • Show Search Results - Show the search results. How many matches have been found. e.g. Total 2 results found!


    • Search results message - Custom search results message. Defaults to Total %d results found. Use %d as the placeholder where to display the total number of results.


    • Text Highlighting Color - The color the text or keywords should be highlighted when matched.


    • Selected Text Highlighting Color - The color the text or keywords should be highlighted when matched and selected. When pressing the next and the previous buttons, the search will cycle through the results, hightligting the currect result with this color.


    • CSS Highlighting Classname - Custom CSS class which will be applied to all highlighted text.


    • Current CSS Highlighting Classname - Custom CSS class which will be applied to the current highlighted text. Defaults to 'current-selected-mark' if left empty.


    • Search Element e.g. body, .class, #id - The HTML element to search within. If for example you'd like to highlight matches in a div with a class content. Enter .content. Multple elements can be used by comma separating them.


    • Exclude Elements - The HTML elements to exclude from the search, comma separated. e.g. element,.class,#id


    • Case Sensitive - Whether or not the search should be case sensitive.


    • Accuracy - Partially': When searching for 'lor' only 'lor' inside 'lorem' will be marked. 'Complementary': When searching for 'lor' the whole word 'lorem' will be marked. 'exactly': When searching for 'lor' only those exact words with a word boundary will be marked. In this example nothing inside 'lorem'. This value is equivalent to the previous option wordBoundary.


    • Load mark.js from CDN - This extension is powered by mark.js. The mark.js library can either be served locally or from a CDN server. If unsure leave the default setting on Yes.




  8. Click on Save & Close.

  9. The module has now been configured successfully.