AutoComplete 自动完成

输入框自动完成功能。

何时使用

需要自动完成时。

代码演示

基本

基本使用。

<template>
    <div>
        <v-auto-complete :data="options" @select="select" @search="search" style="width:200px;"></v-auto-complete>
    </div>
</template>
<script>
    export default {
        data: ()=> ({
            options: [],
        }),
        methods: {
            search(val) {
                this.options = [{
                    value: value,
                    label: value
                }, {
                    value: value + value,
                    label: value + value
                }, {
                    value: value + value + value,
                    label: value + value + value
                }];
            },
            select(value) {
                console.log('select value', value)
            }
        }
    }
</script>

自定义选项

通过默认scopedSlot自定义选项显示内容

<template>
    <v-auto-complete @search="handelSearch" :data="results" style="width:200px;">
        <template slot-scope="{data}">
            {{data.label}}-1
        </template>
    </v-auto-complete>
</template>
<script>
    export default {
        data: ()=> ({
            results: [],
        }),
        methods: {
            handelSearch(value) {
                if(!value || value.indexOf('@') >=0 ){
                    this.results = [];
                } else {
                    this.results = ['gmail.com', '163.com', 'qq.com'].map(domain => ({value: `${value}@${domain}`, label: `${value}@${domain}`}));
                }
            }
        }
    }
</script>

不区分大小写

不区分大小写的 AutoComplete

<template>
    <v-auto-complete :data="dataSource" :filter="filter" style="width:200px;"></v-auto-complete>
</template>
<script>
    export default {
        data: ()=> ({
            dataSource: [
                { value: 'Burns Bay Road', label: 'Burns Bay Road' },
                { value: 'Downing Street', label: 'Downing Street' },
                { value: 'Wall Street', label: 'Wall Street'},
            ],
        }),
        methods: {
            filter(val, item) {
                const input = val.toLocaleUpperCase();
                return item.value.toUpperCase().indexOf(input) !== -1;
            }
        }
    }
</script>

API

AutoComplete Props

Data Props

AutoComplete Events