If you do a search through some apps, it’s really neat to see the letters or term you searched for ‘highlighted’ in the text results.
That would be a neat feature built into the text item. Perhaps a binding field for ‘letters to highlight’, and a highlight color selection field.
That way, you can bind the ‘letters to highlight’ property of the text item to a text input asset.
For example, if I build a directory, and I’m searching for a name…if I type the letters “Jo”, it will bring a list of people of Joes and John’s, with the “Jo” portion of their name highlighted.
This would also be extremely useful if your search goes across multiple fields. Let’s say I have an office directory, and a sample tenant would be “RealEyes Displays, Suite 300, Description: Owned by Johnny Johnson for 24 years, use the left entrance”. I could create a search field that concatenates all those fields into one so they are easily searchable. However, in the list that is showing, each field is separate, but I can still use the highlight text feature of each field that is bound to the search term. So if I type “Jo” in the search, it will bring up RealEyes Displays…with the “Jo” of Johnny Jonson highlighted in the description.
I created a custom Interface Asset that injects CSS / modifies the Intuiface Player + XP HTML on demand, based on a search criterion.
I shared an XP with you so you can test it on your end.
Full disclaimer: 90% of the code below was written by ChatGPT, I just adapted it slightly to make it fit in an Intuiface Interface Asset structure.
In this version, the yellow background and bold text is hard coded, but this could be made an option of the highlightText action.
Note: This will apply this style in any text visible in the currently displayed Intuiface scene. I don’t have an (easy) way to target specifically the text within a Data-Template or within a collection, though if you had the need, this would probably be doable as well.
private m_bSearchStyleAdded = false;
@Action({
displayName: "Highlight Text"
})
public highlightText(
@Parameter({
name: 'searchText',
displayName: 'Text to highlight',
type: String
}) searchText: string): void {
//clear previous highlighted text, if any
this.clearHighlight();
if (!searchText) return; // Exit if the search text is empty
if (!this.m_bSearchStyleAdded) {
// Add CSS for the highlight class dynamically
const styleElement = document.createElement('style');
styleElement.textContent = `
.highlightSearch {
background-color: yellow;
color: black;
font-weight: bold;
}
`;
document.head.appendChild(styleElement);
this.m_bSearchStyleAdded = true;
}
// Function to recursively process child nodes
const highlightTextInElement = (element: Node, searchText: string): void => {
const childNodes = element.childNodes;
childNodes.forEach((node) => {
if (node.nodeType === Node.TEXT_NODE) {
const textContent = node.textContent || '';
const regex = new RegExp(`(${searchText})`, 'gi');
if (regex.test(textContent)) {
// Create a span element with highlighted text
const highlightedText = textContent.replace(regex, '<span class="highlightSearch">$1</span>');
const spanElement = document.createElement('span');
spanElement.innerHTML = highlightedText;
// Replace the text node with the span element
node.parentNode?.replaceChild(spanElement, node);
}
} else {
// If the node is not a text node, process its children
highlightTextInElement(node, searchText);
}
});
};
// Start processing the content element
highlightTextInElement(document.body, searchText);
}
@Action({
displayName: "Clear highlight"
})
public clearHighlight(): void {
// Find all elements with the highlight class
const highlightedElements = document.querySelectorAll('.highlightSearch');
highlightedElements.forEach((spanElement) => {
const parent = spanElement.parentNode;
if (parent) {
// Replace the <span> with its text content
parent.replaceChild(document.createTextNode(spanElement.textContent || ''), spanElement);
}
});
}
