Add a search feature to my html document

Getting Started
1

I want to add a Search feature in my html document that is displayed using HTMLViewer.

I found:
https://documentation.xojo.com/api/deprecated/htmlviewer.html#htmlviewer-executejavascript

and the example is:
Var jsSrc As String
jsSrc = “document.forms[0].elements[‘search’].value=”“xojo”";"
HTMLViewer1.ExecuteJavaScript(jsSrc)

The above example is totaly useless since wikipedia do the job, not Xojo; you only do not have to type xojo in the Search string area.

So, I add a TextInput (JavaScript code) in my html page and I do not really find a way to use what I found here: Window.find()

tips to use it are welcome. (inside my desktop application that display that html file - and many others generated with that application).
I implemented a search feature in the html code (stored in a TextArea), but the text is inside the html, so less “readable” than in the HTMLViewer.

TIA

2

Don’t know if this is what you are looking for…

I’m trying something similar myself and it works for me.

I have a simple window with a DesktopHTMLViewer, a DesktopTextField and a DesktopButton.

In the “Opening” event of the DesktopHTMLViewer

LoadURL("https://xojo.com")

and in the “Pressed” event of the DesktopButton

Var js As String = "window.find('" + TextField1.Text + "');"
HTMLViewer1.ExecuteJavaScript(js)

It works in Safari, Mac Monterey.

It selects the search string in the viewer and changes sequentially when you click the button several times

1 Like
3

Thank you OJAN.

This is not what I had in mind, but since I have to add a “Reload” Button, and this is working fine, I follow your advice.

4

The html code below comes from my test document (the line after ), but try to load a page…



<form action="window.find('search')">
	<label for="search">Search:</label>
	<input type="search" name="search" width="400">
	<input type=submit value='search'>
	<input type="button" value="Click me" onclick="msg('Message')"> 
</form>

Firefox is happy with the code, but a click on the buttons do not issue a search nor a message…

5

Place the window.find in your desktop button press event, and invoke it using ExecuteJavaScript. See OLANs post above. The code needed is provided, and you do not need to include window.find in your HTML document itself; this is a JavaScript command called by Xojo, not the HTML page. Let us know if you need more help.

6

That is what I’ve done; I only show where I was before OLAN’s answer.

Thanks

7

This javascript highlights in yellow all occurences of the searched string in the HTMLViewer:

Use it as:

HTMLViewer.ExecuteJavaScript(The above javascript)

dim js As String
js = "MyApp_HighlightAllOccurencesOfString('"+stringToSearchAndHighlight+"');"
HTMLViewer.ExecuteJavaScript(js)
2 Likes
8

More colors with “windows.find” :slight_smile:

In a Window you add:

A Constant named: “kJSdoSearch”

Default Value:

function doSearch(text, backgroundColor) {
  if (window.find && window.getSelection) {
	document.designMode = "on";
	var sel = window.getSelection();
	sel.collapse(document.body, 0);
	while (window.find(text)) {
	  document.execCommand("HiliteColor", false, backgroundColor);
	  sel.collapseToEnd();
	}
	document.designMode = "off";
  }
}

A DesktopHTMLViewer named “HTMLViewer1”
Opening Event:

Me.LoadURL("https://forum.xojo.com/t/add-a-search-feature-to-my-html-document/67883")

A DesktopTextField named: “TextField1”

A DesktopPopupMenu named: “PopupMenu1”
Opening Event:

Me.AddRow("yellow")
Me.AddRow("red")
Me.Addrow("green")
Me.AddRow("blue")
Me.Addrow("transparent")

Me.SelectedRowIndex = 0

A DesktopButton named:
“Button1”
Pressed Event:

Var js As String = kJSdoSearch + " doSearch('" + TextField1.Text + "', '" + PopupMenu1.SelectedRowValue + "');"

HTMLViewer1.ExecuteJavaScript(js)

Be warned, “document.execCommand” is deprecated but still works fine in XOJO 2021 3.1.

9

Thank you for these additions…