# How to Use Element UI Select and Option Components with Remote Data and Filtering

> Learn how to use Element UI Select with remote data and filtering. Implement the remote prop and a custom remote method to fetch options dynamically and enhance user experience.

- Repository: [饿了么前端/element](https://github.com/ElemeFE/element)
- Tags: how-to-guide
- Published: 2026-03-07

---

**To enable remote search in Element UI Select, set the `filterable` and `remote` props to `true` and provide a `remote-method` function that fetches data asynchronously and updates the options array.**

The **Element UI** library (maintained in the `ElemeFE/element` repository) provides a powerful `Select` component that supports loading options from remote sources with live filtering. When you need to search through large datasets or backend APIs, combining the `filterable` and `remote` props allows the component to delegate search logic to your custom methods while handling the UI state internally.

## Core Props for Remote Search

Three specific props control the remote filtering behavior. When configured together, they switch the component from local filtering to a server-driven search interface.

### The filterable and remote Props

Setting **both** `filterable` and `remote` to `true` switches the component into remote search mode. The **filterable** prop renders the input field as a searchable text box, while the **remote** prop disables local filtering. When active, the component will not filter the existing options array client-side. Instead, it invokes your supplied function whenever the query string changes.

### The remote-method Prop

The **remote-method** prop accepts a function that receives the current query string as its sole argument. According to the implementation in [`packages/select/src/select.vue`](https://github.com/ElemeFE/element/blob/main/packages/select/src/select.vue) (lines 483-490), this function is called within `handleQueryChange` when `remote` is true. Your implementation must perform the asynchronous data fetching (e.g., via AJAX) and replace the component's bound options array. The component automatically displays a loading spinner when the `loading` prop is set to `true`.

## Internal Implementation Flow

When a user types into a remote-capable Select component, the following execution flow occurs, as implemented in [`packages/select/src/select.vue`](https://github.com/ElemeFE/element/blob/main/packages/select/src/select.vue):

1. **Input event triggered** – The internal `<input>` element bound to `query` emits an input event.
2. **Query change handler invoked** – The `handleQueryChange` method processes the new string (line 483).
3. **Remote method executed** – Because `remote` is true, the component calls `remoteMethod(query)` (line 485) instead of filtering locally.
4. **Data fetched and state updated** – Your provided function performs the network request, toggles the `loading` flag, and replaces the `options` array with the fetched results.
5. **Option visibility calculated** – Each `<el-option>` component receives the updated data. The option's internal `queryChange` method (defined in [`packages/select/src/option.vue`](https://github.com/ElemeFE/element/blob/main/packages/select/src/option.vue), lines 37-44) tests its own label against the current query using `new RegExp(...).test(this.currentLabel)`.
6. **Empty states rendered** – The dropdown displays a loading spinner when `loading` is true, a "no data" message if the array is empty, or "no match" when filtering yields zero results, controlled by the `emptyText` computed property.

## Critical Implementation Details

### Unique Key Attributes

When rendering `<el-option>` elements with `v-for`, each option **must** have a unique `:key` bound to a stable identifier (typically the value field). This is required for Vue's virtual DOM diffing algorithm and for maintaining the internal option cache that tracks selection states and keyboard navigation indices. Omitting unique keys causes rendering inconsistencies when the remote data updates dynamically.

### Keyword Reservation and Default Selection

The **`reserve-keyword`** prop retains the typed search text in the input field after selecting an item in `multiple` mode. This enables rapid batch selections without retyping the query. The **`default-first-option`** prop allows users to press **Enter** to immediately select the first matching option without explicit arrow key navigation. This logic is implemented in the `checkDefaultFirstOption` method (lines 909-937 of [`packages/select/src/select.vue`](https://github.com/ElemeFE/element/blob/main/packages/select/src/select.vue)), which computes and highlights the default option when the prop is enabled.

## Code Examples

### Basic Remote Searchable Select

This example demonstrates a single-select component that fetches data from a simulated API as the user types:

```html
<template>
  <el-select
    v-model="value"
    filterable
    remote
    :remote-method="remoteMethod"
    :loading="loading"
    placeholder="Search a state">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"/>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      value: '',
      options: [],
      loading: false,
      allStates: ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California']
    };
  },
  methods: {
    remoteMethod(query) {
      if (query === '') {
        this.options = [];
        return;
      }
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.options = this.allStates
          .filter(st => st.toLowerCase().includes(query.toLowerCase()))
          .map(st => ({ value: st, label: st }));
      }, 300);
    }
  }
};
</script>

```

### Remote Search with Multiple Selection

For tagging interfaces or batch selection, combine `multiple` with `reserve-keyword` to maintain the search query between selections:

```html
<template>
  <el-select
    v-model="selected"
    multiple
    filterable
    remote
    reserve-keyword
    :remote-method="searchTags"
    :loading="loading"
    placeholder="Pick tags">
    <el-option
      v-for="tag in tags"
      :key="tag.id"
      :label="tag.name"
      :value="tag.id"/>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selected: [],
      tags: [],
      loading: false
    };
  },
  methods: {
    searchTags(query) {
      if (query === '') {
        this.tags = [];
        return;
      }
      this.loading = true;
      fetch(`/api/tags?search=${query}`)
        .then(res => res.json())
        .then(data => {
          this.tags = data;
          this.loading = false;
        });
    }
  }
};
</script>

```

## Summary

- Set **both** `filterable` and `remote` to `true` to enable backend-driven search in Element UI Select components.
- Implement the **remote-method** prop as an async function that fetches data and updates the bound options array.
- Always provide unique `:key` attributes on `<el-option>` elements to ensure proper Vue reconciliation and internal state management.
- Use **reserve-keyword** to preserve search text during multiple selections and **default-first-option** to enable Enter-key selection of the first result.
- The core logic resides in [`packages/select/src/select.vue`](https://github.com/ElemeFE/element/blob/main/packages/select/src/select.vue) (handling query changes and default options) and [`packages/select/src/option.vue`](https://github.com/ElemeFE/element/blob/main/packages/select/src/option.vue) (handling individual option visibility).

## Frequently Asked Questions

### What is the difference between filterable and remote in Element UI Select?

The `filterable` prop enables the search input field, allowing users to type queries. The `remote` prop changes the filtering behavior from local (client-side string matching against existing options) to remote (server-side). When both are true, the component invokes your `remote-method` instead of filtering the existing `options` array locally, as seen in the `handleQueryChange` implementation.

### How does the Select component handle loading states during remote search?

The component monitors the **loading** prop to display a visual spinner in the dropdown area. Your `remote-method` implementation must toggle this boolean—setting it to `true` before initiating the network request and `false` upon completion. This provides immediate visual feedback while the asynchronous data fetch occurs.

### Why is the :key attribute required when using v-for with el-option?

The Select component maintains an internal cache of option components to manage keyboard navigation, selection states, and highlight indexes. Unique `:key` attributes ensure Vue's virtual DOM diffing algorithm correctly tracks each option instance when the remote data updates. Without stable keys, the component may lose selection state or display incorrect highlighting when the options array refreshes.

### How can I select the first option automatically when pressing Enter during remote search?

Set the **default-first-option** prop to `true`. This enables the `checkDefaultFirstOption` method (implemented in [`packages/select/src/select.vue`](https://github.com/ElemeFE/element/blob/main/packages/select/src/select.vue) at lines 909-937), which automatically highlights the first visible option when the dropdown opens or the query changes. When the user presses Enter, that highlighted option is selected immediately, bypassing the need for manual arrow-key navigation.