Ant Design Vue教程

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

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

ajax服务器搜索

主要属性 说明
show-search 将输入框设置成搜索框模式
not-found-content 没有数据时,不进行提示
search
用户输入关键词时的事件
filter-option
设置false禁止客户端筛选
<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>

例子

客户端下拉框筛选

主要属性 说明
show-search 将输入框设置成搜索框模式
not-found-content 没有数据时,不进行提示
filter-option
设置true开启客户端筛选,这和服务器端刚好相反
<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>

例子

Catalog
快速入门 Dropdown 下拉菜单 Menu 导航菜单 Pagination 分页 Steps 步骤条 AutoComplete 自动填充 Cascader 级联选择 Checkbox 多选框 DatePicker 日期选择框 Input 输入框 InputNumber 数字输入框 Mentions 提及 Radio 单选框 Rate 评分组件 Select 下拉框 Select 下拉框用法 Select 下拉框联动 Select 下拉框多选 Select 下拉框分组 Select 搜索框 Select 属性和事件 Slider 滑动输入条 Switch 开关