Lookup Options Filter

The following examples show how to use LookupField options filtering.

When using options based lookup, sometimes there is a requirement to support filtering of the already loaded options. Since LookupField uses List widget to render drop-down contents, we can specify filterParams and onCreateFilter configuration through listOptions property to achieve this. However, when using listOptions, minOptionsForSearchField and empty text are not behaving correctly since LookupField doesn't consider List filtering.

To avoid this behavior, filterParams and onCreateVisibleOptionsFilter callback were introduced.

Following example showcases usage of the onCreateVisibleOptionsFilter callback to achieve advanced filtering scenario. Domicile and Nationality lookup fields display only active countries, unless country is already selected, in which case it is kept in the list.

Try changing countries active status to observe the affects onto lookup fields:

Form

Domicile

Austria

Nationality

Bosnia and Herzegovina

Countries

Country	Code	Capital	Contient
Austria	AT	Vienna	Europe
Cyprus	CY	Nicosia	Europe
Bosnia and Herzegovina	BA	Sarajevo	Europe
Nicaragua	NI	Managua	North America
Morocco	MA	Rabat	Africa

Controller Index

<div>
    <h2 style="margin-top: 20px">Form</h2>
    <div layout={{ type: LabelsTopLayout, vertical: true }}>
    <LookupField
        label="Domicile"
        value-bind="$page.client.domicile"
        options-bind="$page.countries"
        optionIdField="code"
        optionTextField="name"
        filterParams-bind="$page.countries"
        onCreateVisibleOptionsFilter={(countries, { store }) => {
            let code = store.get("$page.client.domicile");
            return (option) => option.code == code || option.active;
        }}
        minOptionsForSearchField={2}
    />
    <LookupField
        label="Nationality"
        value-bind="$page.client.nationality"
        options-bind="$page.countries"
        optionIdField="code"
        optionTextField="name"
        filterParams-bind="$page.countries"
        onCreateVisibleOptionsFilter={(countries, { store }) => {
            let code = store.get("$page.client.nationality");
            return (option) => option.code == code || option.active;
        }}
        minOptionsForSearchField={2}
    />
    </div>

    <hr style={{ margin: "30px 0" }} />

    <h4>Countries</h4>
    <Grid
    records-bind="$page.countries"
    columns={[
        { field: "name", header: "Country", defaultWidth: 200 },
        { field: "code", header: "Code", defaultWidth: 100 },
        { field: "capital", header: "Capital", defaultWidth: 120 },
        { field: "continent", header: "Contient", defaultWidth: 120 },
        {
            field: "active",
            header: "Active",
            items: (
                <cx>
                <Checkbox value-bind="$record.active" />
                </cx>
            ),
            align: "center",
            defaultWidth: 80,
        },
    ]}
    scrollable
    />
</div>

Copied!Cx Fiddle

Documentation

Lookup Options Filter

Form

Countries