Vue+Ant Design 实现模糊搜索：三种方法详解

Vue+Ant Design 的 A-Input 可以通过使用 Ant Design 提供的 Select 组件、AutoComplete 组件或 Input.Search 组件来实现模糊搜索展示。

使用 Ant Design 的 Select 组件实现模糊搜索展示：

<template>
  <a-select
    mode="multiple"
    :filter-option="false"
    :default-active-first-option="false"
    :show-arrow="false"
    :placeholder="placeholder"
    :loading="loading"
    :value="selectedOptions"
    @search="handleSearch"
    @change="handleChange"
  >
    <a-select-option
      v-for="option in options"
      :key="option.value"
      :value="option.value"
    >
      {{ option.label }}
    </a-select-option>
  </a-select>
</template>

<script>
export default {
  data() {
    return {
      placeholder: '请输入关键字',
      loading: false,
      selectedOptions: [],
      options: [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        { label: 'Option 3', value: 'option3' },
        { label: 'Option 4', value: 'option4' },
        { label: 'Option 5', value: 'option5' },
      ],
    };
  },
  methods: {
    handleSearch(keyword) {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.options = this.options.filter((option) =>
          option.label.includes(keyword)
        );
      }, 500);
    },
    handleChange(value) {
      this.selectedOptions = value;
    },
  },
};
</script>

使用 Ant Design 的 AutoComplete 组件实现模糊搜索展示：

<template>
  <a-auto-complete
    :options="options"
    :loading="loading"
    :default-active-first-option="false"
    :placeholder="placeholder"
    @search="handleSearch"
    @select="handleSelect"
  >
    <a-input
      slot="addonAfter"
      v-model="selectedOption"
      :disabled="!selectedOption"
      @click="clearSelectedOption"
    />
  </a-auto-complete>
</template>

<script>
export default {
  data() {
    return {
      placeholder: '请输入关键字',
      loading: false,
      selectedOption: '',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' },
        { value: 'option4', label: 'Option 4' },
        { value: 'option5', label: 'Option 5' },
      ],
    };
  },
  methods: {
    handleSearch(keyword) {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.options = this.options.filter((option) =>
          option.label.includes(keyword)
        );
      }, 500);
    },
    handleSelect(value) {
      this.selectedOption = value;
    },
    clearSelectedOption() {
      this.selectedOption = '';
    },
  },
};
</script>

使用 Ant Design 的 Input.Search 组件实现模糊搜索展示：

<template>
  <a-input-search
    :loading="loading"
    :placeholder="placeholder"
    :enter-button="false"
    @search="handleSearch"
    @change="handleChange"
  />
  <a-list
    :loading="loading"
    :item-layout="'horizontal'" 
    :dataSource="filteredData"
    renderItem="renderItem"
  />
</template>

<script>
import { aList, aListItem, aAvatar } from 'ant-design-vue';

export default {
  components: {
    aList,
    aListItem,
    aAvatar,
  },
  data() {
    return {
      placeholder: '请输入关键字',
      loading: false,
      data: [
        {
          title: 'Ant Design Title 1',
          description: 'Ant Design, a design language for background applications',
          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
        },
        {
          title: 'Ant Design Title 2',
          description: 'Ant Design, a design language for background applications',
          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
        },
        {
          title: 'Ant Design Title 3',
          description: 'Ant Design, a design language for background applications',
          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
        },
        {
          title: 'Ant Design Title 4',
          description: 'Ant Design, a design language for background applications',
          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
        },
        {
          title: 'Ant Design Title 5',
          description: 'Ant Design, a design language for background applications',
          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
        },
      ],
      filteredData: [],
    };
  },
  methods: {
    handleSearch(keyword) {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.filteredData = this.data.filter((item) =>
          item.title.toLowerCase().includes(keyword.toLowerCase())
        );
      }, 500);
    },
    handleChange(e) {
      if (!e.target.value) {
        this.filteredData = [];
      }
    },
    renderItem(item) {
      return (
        <a-list-item>
          <a-list-item-meta
            avatar={<a-avatar src={item.avatar} />}
            title={<a href="#">{item.title}</a>}
            description={item.description}
          />
        </a-list-item>
      );
    },
  },
};
</script>