Highlight Search Term(S) In Results Page

[mmdouce]

I have a tabular report listing results from a keyword search across multiple fields. The results page has numerous columns containing a fair amount of text. 

 

Is there anyway to highlight the returned search terms to make it easier to discern relevance for the end-user? 

 

Thank you

[Kurumi]

Hi @markItUp - May I know what is your search configuration in your DataPage? The code above is applicable to 'Results below Search Form' with 'Display results on initial load' enabled. If you have 'Results on a new page' or 'Results below Search Form' with 'Display results on initial load' disabled, then you may need to call again the external script to Search Form. Like this one:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>

This will be inserted in the Header under 'Configure Search Fields'. You will have two - one for Search and one for the Results Page.

I hope this helps!

[georgep]

I too would be interested if this could be done.

Seems like a very useful facility - if anyone has any ideas would love to hear.

 

G

[Kurumi]

Hi! Just an update - if you would like to highlight search words in the Results Page, you can try these solutions:

1. From this link: https://www.delftstack.com/howto/javascript/highlight-text-using-javascript/

To apply in the DataPage, insert the code below in the Footer of Configure Results Page Fields

<script>

document.addEventListener('DataPageReady', function (event) {

let searched = document.querySelector("input[name='Value1_1']").value.trim();
    if (searched !== "") {
        let text = document.querySelector("table[id*='cbTable']").innerHTML;
        let re = new RegExp(searched,"g"); // search for all instances
        let newText = text.replace(re, `<mark>${searched}</mark>`);
    document.querySelector("table[id*='cbTable']").innerHTML = newText;
    }

});

</script>

You can change the Value1_1 based on the form element of your search field.

2. Using mark.js - https://markjs.io/ This is text highlighter written in JavaScript.

To apply in the DataPage, insert the code below in the Footer of Configure Results Page Fields

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>

<script>

document.addEventListener('DataPageReady', function (event) {

let searched = document.querySelector("input[name='Value1_1']").value;

    if (searched !== "") {
       var instance = new Mark(document.querySelector("table[id*='cbTable']").tBodies[0]);
       instance.mark(searched);
    }

});
</script>

Result:

I hope this helps!

 

[markItUp]

On 11/25/2022 at 5:36 PM, Meekeee said:

Hi! Just an update - if you would like to highlight search words in the Results Page, you can try these solutions:

1. From this link: https://www.delftstack.com/howto/javascript/highlight-text-using-javascript/

To apply in the DataPage, insert the code below in the Footer of Configure Results Page Fields

<script>

document.addEventListener('DataPageReady', function (event) {

let searched = document.querySelector("input[name='Value1_1']").value.trim();
    if (searched !== "") {
        let text = document.querySelector("table[id*='cbTable']").innerHTML;
        let re = new RegExp(searched,"g"); // search for all instances
        let newText = text.replace(re, `<mark>${searched}</mark>`);
    document.querySelector("table[id*='cbTable']").innerHTML = newText;
    }

});

</script>

You can change the Value1_1 based on the form element of your search field.

2. Using mark.js - https://markjs.io/ This is text highlighter written in JavaScript.

To apply in the DataPage, insert the code below in the Footer of Configure Results Page Fields

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>

<script>

document.addEventListener('DataPageReady', function (event) {

let searched = document.querySelector("input[name='Value1_1']").value;

    if (searched !== "") {
       var instance = new Mark(document.querySelector("table[id*='cbTable']").tBodies[0]);
       instance.mark(searched);
    }

});
</script>

Result:

I hope this helps!

 

Does the mark.js example still work? I am having trouble implementing it. When attempting, my browser console states: 

ReferenceError: Can't find variable: Mark

When using your first example, I had to change the code around a bit to make it work. Unfortunately I couldn't make back to back searches and the user would see the mark tags in the search bar which may confuse my users. I have attached photos of what happens with one search and what happens when another search is made without reloading the page. In the second photo, no keyword would highlight.

This is why I would like to implement the mark.js solution. Any guidance is much appreciated.

[markItUp]

34 minutes ago, Meekeee said:

Hi @markItUp - May I know what is your search configuration in your DataPage? The code above is applicable to 'Results below Search Form' with 'Display results on initial load' enabled. If you have 'Results on a new page' or 'Results below Search Form' with 'Display results on initial load' disabled, then you may need to call again the external script to Search Form. Like this one:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>

This will be inserted in the Header under 'Configure Search Fields'. You will have two - one for Search and one for the Results Page.

I hope this helps!

Hey, this works! I had to rename my table but it works. Thank you very much!

Below is the code I used just incase it is needed in the future.

- In the Search and Report Wizard - Configure Search Fields in the Header

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>

- In the Search and Report Wizard - Configure Results Page Fields in the Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>
<script>
    document.addEventListener('DataPageReady', function (event) {
        let searched = document.querySelector("input[name='Value1_1']").value;
        if (searched !== "") {
            var instance = new Mark(document.querySelector("table[class*='cbResultSetTable']").tBodies[0]);
            instance.mark(searched);
        }
    });
</script>

 

[markItUp]

On 10/13/2023 at 9:09 PM, Meekeee said:

Hi @markItUp - May I know what is your search configuration in your DataPage? The code above is applicable to 'Results below Search Form' with 'Display results on initial load' enabled. If you have 'Results on a new page' or 'Results below Search Form' with 'Display results on initial load' disabled, then you may need to call again the external script to Search Form. Like this one:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>

This will be inserted in the Header under 'Configure Search Fields'. You will have two - one for Search and one for the Results Page.

I hope this helps!

If the DataPages were split into two instead of one, could this still work? 

For example if one DataPage was under "Web Form Wizard - Configure Fields" instead of "Search and Report Wizard - Configure Search Fields" would this highlighting script still work?

I am having trouble implementing it and wanted to know if it was even possible because even though you can add a Header & Footer to the "Web Form Wizard - Configure Fields" section there is no "Search and Report Wizard - Configure Results Page Fields". So, when you go under the other DataPage, there is a "Search and Report Wizard - Configure Results Page Fields" where you can put in the second part of the script, but there is no "Search and Report Wizard - Configure Search Fields" to put the first part of the script.

The type of my first DataPage is Forms: Submission Form and the type of the second is Reports: Tabular.

I wanted to know if it was even possible to do this. 

[roattw]

I never could get this to fire, and it seems straight forward.  For the  

("input[name='Value1_1']")

My filed is [@Keywords]  so mine should read 

("input[name='Keywords']")

Im assuming you have to define some CSS, which I did:

<style>
mark {
    background: orange;
    color: black;
}
</style>