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.

 <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> 
 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,
      },
    ]);
  }
} 
 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>(); 
 import { createModel } from "cx/data";
import { Controller, LabelsTopLayout } from "cx/ui";
import { Checkbox, Grid, LabeledContainer, LookupField } from "cx/widgets"; 

Allowed Countries

Allow only countries marked Active

Domicile

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:

The current value of filterParams
An object containing the store for accessing other state values