HighlightedSearchText

import { HighlightedSearchText } from 'cx/widgets';

The HighlightedSearchText is used to render text with highligted search terms. Check how this works in the following example:

Filter

Belgrade
Zagreb
Sarajevo
Banja Luka

List

<LabelsTopLayout columns={1}>
    <TextField label="Search" value-bind="$page.search.query" />
    <Checkbox value-bind="$page.search.filter">Filter</Checkbox>
</LabelsTopLayout>
<List
    records={[
        { text: 'Belgrade'},
        { text: 'Zagreb'},
        { text: 'Sarajevo'},
        { text: 'Banja Luka'}
    ]}
    mod="bordered"
    filterParams-bind="$page.search"
    onCreateFilter={(params) => {
        let { query, filter } = params || {};
        let predicate = getSearchQueryPredicate(query);
        if (!filter) return () => true;
        return record => predicate(record.text);
    }}
>
    <HighlightedSearchText text-bind="$record.text" query-bind="$page.search.query" />
</List>

Copied!Cx Fiddle

Configuration

Property	Description	Type
query	Search query.	string
text	Text to be displayed.	string
baseClass	Base CSS class. Default is `highlightedsearchtext`.	string
chunks	A list of text chunks to be displayed. Even chunks are displayed as common text, odd chunks are highlighted. In case this is not provided, the widget will calculate it based on `text` and `query`.	string[]
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
outerLayout	Defines the outer layout which wraps the widget.	widget
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

Documentation

HighlightedSearchText