Find and highlight text on the page

advanced-prototyping
newbie-question
#1

Hello! I don’t have much experience in Axure and was given a complicated task I’m not even sure possible to accomplish with Axure 9 Pro.

I have to type the text in the text widget and the typed in characters should be highlighted in the the document on the right side. There will be no search button to click, so the search must be dynamic. Also search must start even if one character is typed in.

For example, I type “02” and all matches should be highlighted even if it’s in the middle of the number, like “10/ 02 /2019”
Also, when there is only a single match, like when the user typed “10/02”, the full corresponding label should be suggested in the dropdown and filled in the text widget if clicked (like on the image below).

09
Screenshot 2020-01-28 at 18.15.09.jpg1906×1090 144 KB

I need this for user testing but I don’t know if this possible in Axure. I browsed the forum and saw examples with repeaters and highlighting the whole word, but those do not cover my case.

Matched characters should be highlighted with a rectangle of a different colour (like yellow for the date label, and other colour if I type in the other Text Field widgets). I created the prototype in Axure for you to download and add some interactions. Ask me any questions if something was not clear. Thank you in advance.
find and highlight.rp (51.4 KB)

#2

Difficult but not entirely impossible in Axure. A similar thread was posted recently about highlighting selected text.

It turns out there is no stylistic ability to change the background color of text–only the background of the text container. So, you’d need to create text containers for each character and set them to selected (with a style of a yellow background) or unselected (white or no background) according to the content of your Text Field in the “Find data” area.

Or, if you can find a javascript function to highlight all instances of a word in a text string or div, you might be able to apply it using a “javascript injection” method (there are several detailed in the forums here) --see the question I posed to @steven.wang in the above thread.

#3

Thank you for the answer. I read the thread you posted and the couple of others similar to this one on the forum, but they are either fully javascript based or with some Axure interactions, that fire up on the button click. I need a mix of those two approached, where user types in the Text Field widget and than the text is dynamically searched through the document.

For that, I created the global variable “TXT”. Added Text Changed interaction to the Text Field and set it “TXT to text on this”. Then, I took the example from the thread you mentioned and modified one line of the Javascript, like: var cur_selection = TXT.toString();

But it doesn’t work. What should I fix to make it work?

find and highlight 2.rp (66.4 KB)

#4

Global variables in Axure are not accessible as global variable in JavaScript, which is why what you tried did not work. There is an API for getting and setting variables from the Axure environment, though.

$axure.setGlobalVariable('variable','value')
$axure.getGlobalVariable('variable')

However out of the box, the latter call won’t work as, for whatever reason, there’s no return statement (I suppose it was just never meant to be used this way). So we need to modify that function first before we can use it:

$axure.internal($ax => {
$ax.public.getGlobalVariable = $ax.getGlobalVariable = function(name) {
        return $ax.globalVariableProvider.getVariableValue(name);
    };
})

So instead of what you posted, you could do:

 var cur_selection = $axure.getGlobalVariable('TXT');
#5

I’m sorry, I’m not a coder so some things are still not clear for me. For example, where should I put this script?
$axure.internal($ax => {
$ax.public.getGlobalVariable = $ax.getGlobalVariable = function(name) {
return $ax.globalVariableProvider.getVariableValue(name);
};
})

Also, script that was firing up on the text selection I moved to the “Text Changed” event and added the global variable there.

Could you, please, fix the file

Highlight background.rp (51.9 KB)

#6

You can put it before the rest of your code.

#7

Thank you! I put it before the rest of my code, added “;” in the end and it worked;

However, the original intent was to search through the group of labels. I added several text labels and grouped them into one group called “Text”. Then, previewed the prototype in the browser and the “Text” group got the id=“u10”. I understand, that changing “u0” to “u10” in the script will do nothing as it will search through the first element, ignoring the rest of the elements in the group. For that, I assume, I need to run the loop that would scan all element inside id=“u10”.

Do you know any examples that would solve my problem?

find and highlight.rp (53.3 KB)