Ant Design Vue AutoComplete 自定义前端筛选函数filterOption

Ant Design Vue AutoComplete 自动完成组件可以通过filterOption方法来自定义前端筛选函数按自己的需要来筛选结果。

filterOption用法

node.js webpack开发方式

需要用到dataSource和filterOption属性

<template>
  <a-auto-complete
    :dataSource="dataSource"
    style="width: 200px"
    placeholder="输入1或者2看看"
    :filterOption="filterOption"
  />
</template>
<script>
  export default {
    data() {
      return {
        dataSource: ['1', '2', '3', '20', '300'],
      };
    },
    methods: {
      filterOption(input, option) {
        return (
          parseInt(option.componentOptions.children[0].text) >= parseInt(input)
        );
      },
    },
  };
</script>

浏览器方式

需要用到data-source和filter-option属性

<!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/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-pagination-item-link.red {
            color: red;
            padding-left: 6px;
            padding-right: 6px;
        }
    </style>
</head>
<body>
<div id="app">
  <a-auto-complete
    :data-source="dataSource"
    style="width: 200px"
    placeholder="输入1或者2看看"
    :filter-option="filterOption"
  />
</div>
<script>
var app = new Vue({
    el: '#app',
     data() {
      return {
         dataSource: ['1', '2', '3', '20', '300'],
      };
    },
    methods: {
         filterOption(input, option) {
        return (
          parseInt(option.componentOptions.children[0].text) >= parseInt(input)
        );
      },
    },
});
 </script>
</body>
</html>

例子