HighlightedSearchText

import { HighlightedSearchText } from 'cx/widgets';

The HighlightedSearchText widget renders text with highlighted search terms. It’s commonly used in search results and filterable lists to show which parts of the text match the search query.

 <div controller={PageController}>
  <TextField value={m.query} placeholder="Type to search..." className="mb-4" />
  <List
    records={m.cities}
    mod="bordered"
    style="width: 200px;"
    filterParams={m.query}
    onCreateFilter={(query: string) => {
      let predicate = getSearchQueryPredicate(query)
      return (record: { text: string }) => predicate(record.text)
    }}
  >
    <HighlightedSearchText text={m.$record.text} query={m.query} />
  </List>
</div> 
 interface City {
  text: string;
}

interface PageModel {
  query: string;
  cities: City[];
  $record: City;
}

const m = createModel<PageModel>(); 
 import { createModel } from "cx/data";
import { Controller } from "cx/ui";
import { TextField, List, HighlightedSearchText } from "cx/widgets";
import { getSearchQueryPredicate } from "cx/util"; 

New York
Los Angeles
Chicago
Houston
Phoenix

Type in the search field to see matching text highlighted in the list items.

Configuration

Property	Type	Description
`text`	`StringProp`	Text to be displayed.
`query`	`StringProp`	Search query used to highlight matching parts.
`chunks`	`string[]`	A list of text chunks to be displayed. Even chunks are displayed as common text, odd chunks are highlighted. If not provided, the widget calculates it based on `text` and `query`.
`baseClass`	`string`	Base CSS class. Default is `highlightedsearchtext`.