ElementUI实现在下拉列表里面进行搜索功能详解

下面我会详细讲解如何使用ElementUI来实现在下拉列表中进行搜索的功能，包含以下步骤：

1. 安装ElementUI组件库
2. 引入ElementUI Select组件
3. 使用filterable属性启用搜索功能
4. 自定义搜索函数

具体步骤如下：

1. 安装ElementUI组件库

首先需要安装ElementUI组件库，可以通过以下命令进行安装：

npm install element-ui --save

2. 引入ElementUI Select组件

在需要使用下拉列表的组件中引入ElementUI的Select组件，例如：

<template>
  <el-select v-model="selected" filterable>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
import { Select, Option } from 'element-ui'

export default {
  components: {
    [Select.name]: Select,
    [Option.name]: Option
  },
  data() {
    return {
      selected: '',
      options: [
        { value: '1', label: 'Option 1' },
        { value: '2', label: 'Option 2' },
        { value: '3', label: 'Option 3' },
        { value: '4', label: 'Option 4' }
      ]
    }
  }
}
</script>

3. 使用filterable属性启用搜索功能

通过给Select组件添加filterable属性来启用搜索功能，例如：

<el-select v-model="selected" filterable>
  ...
</el-select>

启用该属性后，在下拉列表上方会出现一个搜索框，用户可以通过输入搜索关键字来筛选下拉列表中的选项。

4. 自定义搜索函数

默认情况下，ElementUI的Select组件会将输入的搜索关键字与下拉列表中的选项的label和value属性进行对比来实现搜索功能。如果需要自定义搜索方式，可以使用filter-method属性来指定一个搜索函数。例如：

<el-select v-model="selected" filterable :filter-method="customFilter">
  ...
</el-select>

其中customFilter是一个自定义的搜索函数，需要在data中进行定义，具体代码如下：

data() {
  return {
    selected: '',
    options: [
      { value: '1', label: 'Option 1' },
      { value: '2', label: 'Option 2' },
      { value: '3', label: 'Option 3' },
      { value: '4', label: 'Option 4' }
    ],
    keyword: ''
  }
},
methods: {
  customFilter(value, option) {
    return option.label.toLowerCase().indexOf(value.toLowerCase()) !== -1 ||
    option.value.toLowerCase().indexOf(value.toLowerCase()) !== -1
  }
}

在该示例代码中，customFilter函数返回一个布尔值来判断option是否应该保留在筛选列表中。在这个函数中，它比较option的label和value值是否包含搜索关键字keyword，如果匹配，则返回true，否则返回false。

以上就是使用ElementUI实现在下拉列表里面进行搜索功能的详细攻略。下面我再分享两个实例，帮助你更好地理解：

实例1：使用远程数据源进行搜索

下面的代码示例展示了如何使用ElementUI的Select组件来从服务器检索数据，并使用filter-method属性进行搜索。

<template>
  <el-select v-model="selected" filterable remote :remote-method="fetchData">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
</template>

<script>
import { Select, Option } from 'element-ui'

export default {
  components: {
    [Select.name]: Select,
    [Option.name]: Option
  },
  data() {
    return {
      selected: '',
      options: [],
      keyword: ''
    }
  },
  methods: {
    fetchData(query) {
      const apiUrl = `https://api.example.com/search?q=${query}`
      return fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
          this.options = data.results
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

在该示例中，我们使用远程数据源从服务器检索数据。fetchData函数接收一个query参数，该参数的值为用户在搜索框中输入的搜索关键字。函数请求服务器，并返回一个Promise对象，该Promise对象返回一个results属性，包含从服务器获取的数据列表。在Select组件上，我们使用remote属性启用远程搜索，使用remote-method属性指定fetchData函数来搜索远程数据源。

实例2：动态更改下拉列表数据

下面的代码示例展示了如何使用组件属性监听，当用户输入搜索关键字时，动态更新下拉列表中的选项。

<template>
  <el-select v-model="selected" filterable>
    <el-option
      v-for="item in filteredOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
import { Select, Option } from 'element-ui'

export default {
  components: {
    [Select.name]: Select,
    [Option.name]: Option
  },
  data() {
    return {
      selected: '',
      options: [
        { value: '1', label: 'Option 1' },
        { value: '2', label: 'Option 2' },
        { value: '3', label: 'Option 3' },
        { value: '4', label: 'Option 4' }
      ],
      keyword: ''
    }
  },
  computed: {
    filteredOptions() {
      const keyword = this.keyword.toLowerCase()
      return this.options.filter(option => {
        return option.label.toLowerCase().indexOf(keyword) !== -1 ||
        option.value.toLowerCase().indexOf(keyword) !== -1
      })
    }
  },
  watch: {
    keyword(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          const lis = document.querySelectorAll('.el-select-dropdown__item')
          for (let i = 0; i < lis.length; i++) {
            lis[i].style.transitionDelay = `${i * 50}ms`
          }
        })
      }
    }
  }
}
</script>

在该示例中，我们使用computed计算属性来动态监听用户输入的搜索关键字，过滤options并返回filteredOptions。在Select组件上，我们在v-for指令中使用filteredOptions代替options来动态显示下拉列表中的选项。在keyword属性的监听器中，我们使用$nextTick方法来确保transitionDelay属性正确应用到下拉列表中的每个选项。这将导致选项在弹出窗口中被依次延迟显示，以增加视觉效果。

希望以上内容能够帮助你理解ElementUI实现在下拉列表里面进行搜索功能的方法。