In this article I would like to show a simple method how to highlight a search term in a text using a jQuery plugin.
The plugin I use is ‘Highlight’ by Johann Burkard which is great tool – light weight, very fast and easy to use.
In native Filemaker you can only achieve such highlighting by manipulating the content of the text field itself.
But this would be visible for all users, so this method is out of the question for search terms.
My idea was to implement such a function directly in a webview with as few fields and formulas as possible.
The solution gets by with 5 fields and one formula in a webview.
This way the text in the field remains unchanged and calculation is done only if necessary – when the webview is visible.
The necessary library ‘jquery.js’ and the plugin ‘highlight.js‘ are located in a parameter table together with a ‘color’ text field. (‘color’ is used to store the highlight color in hex format and can also be included directly in the webview – this saves one more field).
The parameter table is connected via an all match relation (relational operator “X”) to the table with the text and search field.
By the way, I always connect my parameter table to the main occurrences of the other tables via such a relation – this has many advantages, trust me.
In the webview, you can use a calculation to include these libraries in the HTML by using the ‘substitute’ command.
Another substitution inserts the highlight command into the HTML if a search term was entered.
This command then applies the highlighting to the ‘body’ of the HTML – in this example just the content from the ’Text’ field.
In the webview the settings should be ‘Allow interaction with web viewer content‘ and ‘Automatically encode URL’.
Content Webview
Let (
[
highlight = If ( Highlight in Webview::Search ≠ "" ; "$('body').highlight('" & Highlight in Webview::Search & "')" ; "" ) ;
body =
"<!doctype html>
<html lang=\"en\">
<head>
<meta charset=\"utf-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<script type=\"text/javascript\">__jquery.js</script>
<script type=\"text/javascript\">__highlight.js</script>
<style>
.highlight {background-color: " & Parameter::color & " ;}
.ui-state-focus { outline: none; }
body,html {
padding: 0px;
margin: 2px;
font-family: \"Lucida Grande\", \"sans-serif\";
font-size: 10px;
}
</style>
</head>
<script>
$( function() {
__highlight
} );
</script>
<body>" & Substitute ( Highlight in Webview::Text ; ¶ ; "<br/>" ) & "
</body>
</html>"
] ;
Substitute ( body ;
["__jquery.js" ; Parameter::jquery.js] ;
["__highlight.js" ; Parameter::highlight.js] ;
["__highlight" ; highlight]
)
)
If we now bring everything together, our highlighting for the search criteria of the ‘Search’ field in the text will look like this.
I have used this method, albeit in a slightly modified form, for example in my WIKI tool.
If you search for a term in the WIKI, you get matching entries displayed.
After calling a found entry, the search term is highlighted there.
We will have a closer look at the tool in a later article.
The function in the webview gives us the possibility to quickly and easily display text highlighting without changing the actual field content.
You have any questions? Feel free to send me an email, I’ll try to answer as soon as possible.