vue+ant design的a-input实现模糊搜索展示

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