Ant Design Vue AutoComplete 查询模式自定义下拉选项内容

Ant Design Vue AutoComplete 查询模式自定义下拉框内容,可以自定义html为下拉内容,样式和布局完全自己控制。
Ant Design  通过slot="dataSource" vue插槽来实现这一自定义功能。

node.js webpack实现查询模式

<template>
  <div class="certain-category-search-wrapper" style="width: 400px;padding:0px 30px 0px 30px">
    <a-auto-complete
      class="certain-category-search"
      dropdownClassName="certain-category-search-dropdown"
      :dropdownMatchSelectWidth="false"
      :dropdownStyle="{width: '300px'}"
      size="large"
      style="width: 100%"
      placeholder="请输入关键词"
      optionLabelProp="selectvalue"
    >
      <template slot="dataSource">
        <a-select-opt-group v-for="group in dataSource" :key="group.title">
          <span slot="label">
            {{group.title}}
            <a
              style="float: right"
              href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=ant%20design%20vue%20site%3Aitxst.com"
              target="_blank"
              rel="noopener noreferrer"
              >更多
            </a>
          </span>
          <a-select-option v-for="opt in group.children" :key="opt.title"  :selectvalue="opt.title" :value="opt.title">
            {{opt.title}}
            <span class="certain-search-item-count">{{opt.count}} 条</span>
          </a-select-option>
        </a-select-opt-group>
        <a-select-option disabled key="all" class="show-all">
          <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=ant%20design%20vue%20site%3Aitxst.com" target="_blank" rel="noopener noreferrer">
            查看所有结果
          </a>
        </a-select-option>
      </template>
      <a-input>
        <a-icon slot="suffix" type="search" class="certain-category-icon" />
      </a-input>
    </a-auto-complete>
  </div>
</template>
<script>
  //下拉选项数据结构并不特殊要求,按照自己的业务需求实现即可
  const dataSource = [
    {
      title: '商品',
      children: [
        {
          title: 'Iphone 11',
          count: 30000,
        },
        {
          title: 'Dell xps',
          count: 50000,
        },
      ],
    },
    {
      title: '店铺',
      children: [
        {
          title: 'Apple旗舰店',
          count: 60100,
        },
        {
          title: 'DELL旗舰店',
          count: 30010,
        },
      ],
    },
    {
      title: '全网',
      children: [
        {
          title: 'www.itxst.com',
          count: 100000,
        },
      ],
    },
  ];
  export default {
    data() {
      return {
        dataSource,
      };
    },
  };
</script>
<style>
  .certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
    color: #666;
    font-weight: bold;
  }

  .certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
    border-bottom: 1px solid #f6f6f6;
  }
  .certain-category-search-dropdown .ant-select-dropdown-menu-item {
    padding-left: 16px;
  }
  .certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
    text-align: center;
    cursor: default;
  }

  .certain-category-search-dropdown .ant-select-dropdown-menu {
    max-height: 300px;
  }
</style>
<style scoped>
  .certain-category-search-wrapper
    >>> .certain-category-search.ant-select-auto-complete
    .ant-input-affix-wrapper
    .ant-input-suffix {
    right: 12px;
  }
  .certain-category-search-wrapper >>> .certain-search-item-count {
    position: absolute;
    color: #999;
    right: 16px;
  }
  .certain-category-search-wrapper
    >>> .certain-category-search.ant-select-focused
    .certain-category-icon {
    color: #108ee9;
  }
  .certain-category-search-wrapper >>> .certain-category-icon {
    color: #6e6e6e;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    font-size: 16px;
  }
</style>

浏览器方式实现查询模式

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Ant Design Vue AutoComplete 查询模式例子</title>
    <script src="http://www.itxst.com/package/vue/vue.min.js"></script>
   <script src="http://www.itxst.com/package/bootstrap-table-1.14.1/jquery-3.3.1/jquery.js"></script>
    <script src="http://www.itxst.com/package/ant-design-vue/antd.min.js"></script>
    <link href="http://www.itxst.com/package/ant-design-vue/antd.min.css" rel="stylesheet" />
    <style>
        body {
            padding-top: 10px
        }
      .ant-select-dropdown-menu{
       max-height: 350px; 
      }
    </style>
</head>
<body>
<div id="app">
    <div class="certain-category-search-wrapper" style="width: 400px;padding:0px 30px 0px 30px">
    <a-auto-complete
      class="certain-category-search"
      dropdown-className="certain-category-search-dropdown"
      :dropdown-match-selectWidth="false"
      :dropdown-style="{width: '400px'}"
      size="large"
      style="width: 100%"
      placeholder="请输入关键词"
      option-label-prop="selectvalue"
    >
      <template slot="dataSource">
        <a-select-opt-group v-for="group in dataSource" :key="group.title">
          <span slot="label">
            {{group.title}}
            <a
              style="float: right"
              href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=ant%20design%20vue%20site%3Aitxst.com"
              target="_blank"
              rel="noopener noreferrer"
              >更多
            </a>
          </span>
          <a-select-option v-for="opt in group.children" :key="opt.title"  :selectvalue="opt.title" :value="opt.title">
            {{opt.title}}
            <span class="certain-search-item-count">{{opt.count}} 条</span>
          </a-select-option>
        </a-select-opt-group>
        <a-select-option disabled key="all" class="show-all">
          <a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=ant%20design%20vue%20site%3Aitxst.com" target="_blank" rel="noopener noreferrer">
            查看所有结果
          </a>
        </a-select-option>
      </template>
      <a-input>
        <a-icon slot="suffix" type="search" class="certain-category-icon" />
      </a-input>
    </a-auto-complete>
  </div>
</div>
<script>
 const dataSource = [
    {
      title: '商品',
      children: [
        {
          title: 'Iphone 11',
          count: 30000,
        },
        {
          title: 'Dell xps',
          count: 50000,
        },
      ],
    },
    {
      title: '店铺',
      children: [
        {
          title: 'Apple旗舰店',
          count: 60100,
        },
        {
          title: 'DELL旗舰店',
          count: 30010,
        },
      ],
    },
    {
      title: '全网',
      children: [
        {
          title: 'www.itxst.com',
          count: 100000,
        },
      ],
    },
  ];
var app = new Vue({
    el: '#app',
    data() {
      return {
        dataSource,
      };
    },
    methods: {
      search(value) {
       
      },
      onSelect(value) {
       //选择的数据
        console.log('onSelect', value);
      } 
    },
});
 </script>
</body>
</html>

例子