Ant Design Vue Select 搜索框，仿百度下拉搜索提示框

本章节将演示Ant Design Vue Select客户端搜索和服务器端搜索，客户端搜索即网页端对下拉选项进行筛选，服务器端搜索即将关键词发往服务器返回并显示下拉结果。

ajax服务器搜索

<template>
  <a-select
    show-search
    :value="value"
    placeholder="请输入关键词"
    style="width: 200px"
    :default-active-first-option="false" 
    :filter-option="false"
    :not-found-content="null"
    @search="handleSearch"
    @change="handleChange"
  > 
   <a-icon slot="suffixIcon" type="search"></a-icon>
    <a-select-option v-for="d in data" :key="d.value">
      {{ d.text }}
    </a-select-option>
  </a-select>
</template>
<script>
 
export default {
  data() {
    return {
      data: [],//搜索事件
      value: undefined,
    };
  },
  methods: {
    //输入框事件
    handleSearch(keyword) {
      //模拟往服务器发送请求
      this.ajax(keyword);
    },
    handleChange(value) {
      console.log(value); 
      this.value=value;
    },
    //模拟往服务器发送请求
    ajax(keyword){
      var that=this;
      that.data = [];
         for(var i=0;i<10;i++) {
            that.data.push({
              value: i,
              text:keyword+i,
            });
          };
    }
  },
};
</script>

例子

客户端下拉框筛选

<template>
  <div>
    <a-select show-search default-value="google" style="width: 200px" @change="onChange">
      <a-icon slot="suffixIcon" type="search" />
      <a-select-option value="yahoo">
        yahoo.com
      </a-select-option>
      <a-select-option value="itxst">
        itxst.com
      </a-select-option>
      <a-select-option value="disabled" disabled>
        Disabled
      </a-select-option>
      <a-select-option value="google">
        google.com
      </a-select-option>
    </a-select> 
  </div>
</template>
<script>
export default {
  methods: {
    onChange(value) {
      console.log(`selected ${value}`);
    },
  },
};
</script>

例子