AutoComplete prop: placement add more value

examples/routers/auto-complete.vue

@@ -1,40 +1,101 @@
 <template>
-    <div style="margin: 100px;width: 200px;">
+    <div style="margin: 100px">
-        <AutoComplete placement="top" transfer v-model="value" icon="ios-search" :data="data" @on-search="handleSearch" @on-change="hc" :filter-method="fm">
+        <AutoComplete
-            <!--<Option v-for="item in data" :value="item" :label="item" :key="item">-->
+                v-model="value4"
-                <!--<span style="color: red">{{ item }}</span>-->
+                icon="ios-search"
-            <!--</Option>-->
+                placeholder="input here"
+                placement="bottom-start"
+                style="width:300px">
+            <div class="demo-auto-complete-item" v-for="item in data4">
+                <div class="demo-auto-complete-group">
+                    <span>{{ item.title }}</span>
+                    <a href="https://www.google.com/search?q=iView" target="_blank">更多</a>
+                </div>
+                <Option v-for="option in item.children" :value="option.title" :key="option.title">
+                    <span class="demo-auto-complete-title">{{ option.title }}</span>
+                    <span class="demo-auto-complete-count">{{ option.count }} 人关注</span>
+                </Option>
+            </div>
+            <a href="https://www.google.com/search?q=iView" target="_blank" class="demo-auto-complete-more">查看所有结果</a>
         </AutoComplete>
     </div>
 </template>
 <script>
-
     export default {
-        props: {
-
-        },
         data () {
             return {
-                value: '',
+                value4: '',
-                data: [],
+                data4: [
-//                data: ['Burns Bay Road', 'Downing Street', 'Wall Street']
+                    {
-            };
+                        title: '话题',
-        },
+                        children: [
-        computed: {},
+                            {
-        methods: {
+                                title: 'iView',
-            handleSearch (value) {
+                                count: 10000,
-                this.data = !value ? [] : [
+
-                    value + '@qq.com',
+                            },
-                    value + '@sina.com',
+                            {
-                    value + '@163.com'
+                                title: 'iView UI',
+                                count: 10600,
+
+                            }
+                        ]
+                    },
+                    {
+                        title: '问题',
+                        children: [
+                            {
+                                title: 'iView UI 有多好',
+                                count: 60100,
+
+                            },
+                            {
+                                title: 'iView 是啥',
+                                count: 30010,
+
+                            }
+                        ]
+                    },
+                    {
+                        title: '文章',
+                        children: [
+                            {
+                                title: 'iView 是一个设计语言',
+                                count: 100000,
+
+                            }
+                        ]
+                    }
                 ]
-            },
-            hc (v) {
-//                console.log(v)
-            },
-            fm (value, item) {
-                return item.toUpperCase().indexOf(value.toUpperCase()) !== -1;
             }
         }
-    };
+    }
 </script>
+<style>
+    .demo-auto-complete-item{
+        padding: 4px 0;
+        border-bottom: 1px solid #F6F6F6;
+    }
+    .demo-auto-complete-group{
+        font-size: 12px;
+        padding: 4px 6px;
+    }
+    .demo-auto-complete-group span{
+        color: #666;
+        font-weight: bold;
+    }
+    .demo-auto-complete-group a{
+        float: right;
+    }
+    .demo-auto-complete-count{
+        float: right;
+        color: #999;
+    }
+    .demo-auto-complete-more{
+        display: block;
+        margin: 0 auto;
+        padding: 4px;
+        text-align: center;
+        font-size: 12px;
+    }
+</style>

src/components/auto-complete/auto-complete.vue

@@ -87,9 +87,9 @@
             },
             placement: {
                 validator (value) {
-                    return oneOf(value, ['top', 'bottom']);
+                    return oneOf(value, ['top', 'bottom', 'top-start', 'bottom-start', 'top-end', 'bottom-end']);
                 },
-                default: 'bottom'
+                default: 'bottom-start'
             },
             transfer: {
                 type: Boolean,