mark-js
Reactive icon

Reactive MarkJs

Stable version 1.0.4 (Compatible with OutSystems 11)
Uploaded
 on 30 August 2023
 by 
0.0
 (0 ratings)
mark-js

Reactive MarkJs

Documentation
1.0.4

This component marks the searched texts in lists and table records in your screens by injecting HTML mark tag using Javascript Mark.js.

Component has two input parameters:

1) SearchWidgetId : Provide the WidgetId where you can use for search terms to be searchable in the content and this parameter is mandatory

2) MarkOptions : Please follow the below table for the same


OptionTypeDefaultDescription
separateWordSearchbooleantrueWhether to search for each word separated by a blank instead of the complete term
accuracystring or object"partially"Either one of the following string values:
  • "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
Or an object containing two properties:
  • "value": One of the above named string values
  • "limiters": A custom array of string limiters for accuracy "exactly" or "complementary". Read more about this in the tutorials section
diacriticsbooleantrueIf diacritic characters should be matched. For example "piękny" would also match "piekny" and "doner" would also match "döner"
acrossElementsbooleanfalseWhether to search for matches across elements
caseSensitivebooleanfalseWhether to search case sensitive
ignoreJoinersbooleanfalseWhether to also find matches that contain soft hyphen, zero width space, zero width non-joiner and zero width joiner. They're used to indicate a point for a line break where there isn't enough space to show the full word
wildcardsstring"disabled"Set to any of the following string values:
  • "disabled": Disable wildcard usage
  • "enabled": When searching for "lor?m", the "?" will match zero or one non-space character (e.g. "lorm", "loram", "lor3m", etc). When searching for "lor*m", the "*" will match zero or more non-space characters (e.g. "lorm", "loram", "lor123m", etc).
  • "withSpaces": When searching for "lor?m", the "?" will match zero or one space or non-space character (e.g. "lor m", "loram", etc). When searching for "lor*m", the "*" will match zero or more space or non-space characters (e.g. "lorm", "lore et dolor ipsum", "lor: m", etc).


Please check the demo application, how to configure this component and if you want to customize further then please check this Mark.Js .


1.0.0

This component marks the searched texts in lists and table records in your screens by injecting HTML mark tag using Javascript Mark.js.

Component has two input parameters:

1) SearchWidgetId : Provide the WidgetId where you can use for search terms to be searchable in the content and this parameter is mandatory

2) MarkOptions : Please follow the below table for the same


OptionTypeDefaultDescription
separateWordSearchbooleantrueWhether to search for each word separated by a blank instead of the complete term
accuracystring or object"partially"Either one of the following string values:
  • "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
Or an object containing two properties:
  • "value": One of the above named string values
  • "limiters": A custom array of string limiters for accuracy "exactly" or "complementary". Read more about this in the tutorials section
diacriticsbooleantrueIf diacritic characters should be matched. For example "piękny" would also match "piekny" and "doner" would also match "döner"
acrossElementsbooleanfalseWhether to search for matches across elements
caseSensitivebooleanfalseWhether to search case sensitive
ignoreJoinersbooleanfalseWhether to also find matches that contain soft hyphen, zero width space, zero width non-joiner and zero width joiner. They're used to indicate a point for a line break where there isn't enough space to show the full word
wildcardsstring"disabled"Set to any of the following string values:
  • "disabled": Disable wildcard usage
  • "enabled": When searching for "lor?m", the "?" will match zero or one non-space character (e.g. "lorm", "loram", "lor3m", etc). When searching for "lor*m", the "*" will match zero or more non-space characters (e.g. "lorm", "loram", "lor123m", etc).
  • "withSpaces": When searching for "lor?m", the "?" will match zero or one space or non-space character (e.g. "lor m", "loram", etc). When searching for "lor*m", the "*" will match zero or more space or non-space characters (e.g. "lorm", "lore et dolor ipsum", "lor: m", etc).


Please check the demo application, how to configure this component and if you want to customize further then please check this Mark.Js .