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

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 (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:

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, 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), 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:

<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:

<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 (handling query changes and default options) and 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}