# Lookup Options Filter

When using options-based lookup, sometimes there is a requirement to filter already loaded options based on external criteria. Since `LookupField` uses a `List` widget internally, you can specify `filterParams` and `onCreateFilter` through the `listOptions` property. However, this approach has limitations with `minOptionsForSearchField` and empty text behavior.

To address this, use `filterParams` and `onCreateVisibleOptionsFilter` directly on the `LookupField`.

```tsx
import { createModel } from "cx/data";
import { Controller, LabelsTopLayout } from "cx/ui";
import { Checkbox, Grid, LabeledContainer, LookupField } from "cx/widgets";

interface Country {
  name: string;
  code: string;
  capital: string;
  continent: string;
  active: boolean;
}

interface Model {
  countries: Country[];
  selectedCountry: string;
  $record: Country;
  allowOnlyActiveCountries: boolean;
}

const m = createModel<Model>();

class PageController extends Controller {
  onInit() {
    this.store.init(m.countries, [
      {
        name: "Austria",
        code: "AT",
        capital: "Vienna",
        continent: "Europe",
        active: true,
      },
      {
        name: "Cyprus",
        code: "CY",
        capital: "Nicosia",
        continent: "Europe",
        active: true,
      },
      {
        name: "Bosnia and Herzegovina",
        code: "BA",
        capital: "Sarajevo",
        continent: "Europe",
        active: false,
      },
      {
        name: "Nicaragua",
        code: "NI",
        capital: "Managua",
        continent: "North America",
        active: true,
      },
      {
        name: "Morocco",
        code: "MA",
        capital: "Rabat",
        continent: "Africa",
        active: true,
      },
    ]);
  }
}

export default (
  <div controller={PageController} class="space-y-6">
    <LabelsTopLayout vertical>
      <LabeledContainer label="Allowed Countries">
        <Grid
          records={m.countries}
          recordAlias={m.$record}
          columns={[
            {
              field: "active",
              header: "Active",
              items: <Checkbox value={m.$record.active} />,
              align: "center",
              defaultWidth: 70,
              pad: false,
            },
            { field: "name", header: "Country", defaultWidth: 200 },
            { field: "code", header: "Code", defaultWidth: 100 },
            { field: "continent", header: "Continent", defaultWidth: 120 },
          ]}
          scrollable
        />
      </LabeledContainer>
      <Checkbox
        value={m.allowOnlyActiveCountries}
        text="Allow only countries marked Active"
      />
      <LookupField
        label="Domicile"
        value={m.selectedCountry}
        options={m.countries}
        optionIdField="code"
        optionTextField="name"
        filterParams={{
          allowOnlyActiveCountries: m.allowOnlyActiveCountries,
          selection: m.selectedCountry,
        }}
        onCreateVisibleOptionsFilter={({
          allowOnlyActiveCountries,
          selection,
        }) => {
          if (allowOnlyActiveCountries)
            return (option: Country) =>
              option.code == selection || option.active;
          return () => true;
        }}
        minOptionsForSearchField={2}
      />
    </LabelsTopLayout>
  </div>
);

```

In this example, **Domicile** and **Nationality** lookup fields display only `active` countries. However, if a country is already selected, it remains visible in the list even if it becomes inactive.

Try changing the `Active` status of countries in the grid to see how it affects the lookup dropdowns.

## Configuration

| Property                       | Type       | Description                                                                    |
| ------------------------------ | ---------- | ------------------------------------------------------------------------------ |
| `filterParams`                 | `any`      | Data that triggers filter recalculation when changed                           |
| `onCreateVisibleOptionsFilter` | `function` | Returns a filter function `(option) => boolean` to determine option visibility |

The `onCreateVisibleOptionsFilter` callback receives:

1. The current value of `filterParams`
2. An object containing the `store` for accessing other state values