Ant Design Vue AutoComplete 输入框自动填充自动完成组件

Ant Design Vue AutoComplete 自动完成组件,类似搜索引擎的输入框自动填充功能。

例子

基本用法

node.js webpack开发方式

<template>
  <a-auto-complete
    :dataSource="ds"
    style="width: 260px"
    @select="onSelect"
    @search="handleSearch"
    placeholder="input here"
  />
</template>
<script>
  export default {
    data() {
      return {
        ds: [], //数据源
      };
    },
    methods: {
      //搜索事件
      handleSearch(value) {
        this.ds = !value ? [] : [value, value + value, value + value + value];
      },
      //选择下拉框事件
      onSelect(value) {
        console.log('onSelect', value);
      },
    },
  };
</script>

浏览器方式，和webpack方式区别是 dataSource属性改成data-source

<div id="app">
    <a-auto-complete 
         :data-source="ds"
         style="width: 260px"
         @select="onSelect"
         @search="handleSearch"
         placeholder="input here">
    </a-auto-complete>
</div>
<script>
var app = new Vue({
    el: '#app',
     data() {
      return {
        ds: [],
      };
    },
    methods: {
     //搜索事件
      handleSearch(value) {
        this.ds = !value ? [] : [value, value + value, value + value + value];
      },
       //选择下拉框事件
      onSelect(value) {
        console.log('onSelect', value);
      },
    },
});
</script>

自定义输入组件

node.js webpack开发方式

<template>
  <a-auto-complete
    :dataSource="dataSource"
    style="width: 260px"
    @search="onSearch"
    @select="onSelect"
  >
    <a-textarea
      placeholder="输入关键词"
      class="custom"
      style="height: 50px"
      @keypress="keyPress"
    />
  </a-auto-complete>
</template>
<script>
  export default {
    data() {
      return {
        dataSource: [],
      };
    },
    methods: {
      //选择事件
      onSelect(value) {
        console.log('onSelect', value);
      },
      //搜索事件
      onSearch(value) {
        this.dataSource = !value ? [] : [value, value + value, value + value + value];
      },
      //键盘事件
      keyPress(ev) {
        console.log('KeyPress', ev);
      },
    },
  };
</script>

浏览器方式

<div id="app">
  <a-auto-complete
    :data-source="ds"
    style="width: 260px"
    @search="onSearch"
    @select="onSelect"
  >
    <a-textarea
      placeholder="输入关键词"
      class="custom"
      style="height: 50px"
      @keypress="keyPress"
    />
  </a-auto-complete>
</div>
<script>
var app = new Vue({
    el: '#app',
     data() {
      return {
        ds: [],
      };
    },
    methods: {
      //选择事件
      onSelect(value) {
        console.log('onSelect', value);
      },
      //搜索事件
      onSearch(value) {
        this.ds = !value ? [] : [value, value + value, value + value + value];
      },
      //键盘事件
      keyPress(ev) {
        console.log('KeyPress', ev);
      },
    },
});
 </script>

例子