# HighlightedSearchText

```ts
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.

```tsx
import { createModel } from "cx/data";
import { Controller } from "cx/ui";
import { TextField, List, HighlightedSearchText } from "cx/widgets";
import { getSearchQueryPredicate } from "cx/util";

interface City {
  text: string;
}

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

const m = createModel<PageModel>();

class PageController extends Controller {
  onInit() {
    this.store.set(m.cities, [
      { text: "New York" },
      { text: "Los Angeles" },
      { text: "Chicago" },
      { text: "Houston" },
      { text: "Phoenix" },
    ]);
  }
}

export default (
  <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>
);

```

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`. |