# Searchable selection editor

This Pro editor narrows a large candidate list through search. Basic Select suits short, fixed lists; Rich Select helps users quickly find an item among many candidates.

Canonical: https://grid.syidax.com/docs/features/rich-select/

<a id="understand"></a>

## How it works and when to use it

In options, label is the readable name and value is the stored value. Define how disabled candidates and empty values are handled too.

Using this feature in a product requires the Pro package and a valid license. Matching setting names do not enable Pro features in Community.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

- [Installation and integration · Shared sample data](https://grid.syidax.com/docs/guides/getting-started.md)

<a id="example-1"></a>

## Example 1. Searchable product editor

Provide products whose codes differ from their names.

```javascript
grid.columnDefs = [{ field: 'product', editable: true, editor: 'autocomplete', options: [
  { value: 'P-001', label: 'Atlas Sensor' },
  { value: 'P-002', label: 'Beacon Lite' },
  { value: 'P-003', label: 'Cipher Pro', disabled: true }
] }];
```

Verify the result: Users search and select by name, but a product code such as P-001 is stored. Align data and label display policies.

<a id="example-2"></a>

## Example 2. Cancel selection and retain the existing value

Start editing, browse other candidates, and press Escape to cancel. Verify that an uncommitted candidate does not remain in the source data.

Verify the result: The user's last committed value should remain. Also verify focus movement and committing with Enter.

<a id="example-3"></a>

## Example 3. Update the candidate list

To disable an out-of-stock product, supply columnDefs with new options. Decide whether to retain the displayed historical product code on existing orders or remove it.

Verify the result: Handle availability for new input separately from historical data display. Keep labels readable for values no longer in the candidate list.

<a id="pitfalls"></a>

## Combining features and troubleshooting

The status column in Features may use basic Select. Specify editor: autocomplete or the relevant custom editor to use searchable editing.

If typing candidates triggers server queries, implement cancellation, late-response handling, and empty lists according to your app's editor contract.

<a id="related-api"></a>

## APIs used by this feature

- [cellEditor](https://grid.syidax.com/docs/columns/cellEditor.md) — Declares a custom cell editor. Use editor to select a built-in editor type.
- [editor](https://grid.syidax.com/docs/columns/editor.md) — Built-in editor type, such as text, number, date, select, or checkbox.

<a id="next"></a>

## Related reading

- [How rows, columns, and IDs relate](https://grid.syidax.com/docs/guides/concepts.md)
- [Connect results and events](https://grid.syidax.com/docs/guides/data-event-access.md)
- [Explore in Features](https://grid.syidax.com/grid/rich-select) — The guide describes which interactions are available to try.