Highlighting text from a dataset in a list repeater

Ask the community
, ,
1

Question:
I have created a list repeater with a search bar.

Within the repeater I have text which is connected to the dataset.

If the text says ‘Enhanced’ I want the text to be highlighted in green

If the text says ‘Statutory’ I want the text to be highlighted in amber
Product:

Wix Editor
What are you trying to achieve:
When results are populated in a repeater if a result says ‘enhanced’ I want it to show as green, if it says ‘statutory’ I want it to show as amber

What have you already tried:
I have not found a solution yes

Additional information:

2

Hi,

You can accomplish this using the .html property for the Text Element you are attempting to highlight.

The following page code snippet waits for the dataset + repeater items to be ready to load and then takes the repeated text element and conditionally highlights the text depending on the result’s value:

$w.onReady(function () {
    $w("#dataset1").onReady(() => {
        $w("#repeater1").onItemReady(($item, itemData, index) => {
            const textElement = $item("#text");
            if (textElement.text === "Enhanced") {
                textElement.html = `<h2><mark style="background: green">${textElement.text}</mark></h2>`
            } else {
                textElement.html = `<h2><mark style="background: #ffbf00">${textElement.text}</mark></h2>`
            }
        });
    });
});

Note: In my case the repeated element was a Page Title so I used <h2> but you can change this to match your text elements style. Check out the following introduction to learn more about the supported HTML Subset