Cascader support search

examples/routers/cascader.vue

@@ -2,8 +2,9 @@
     <Row>
         <i-col span="4">
             <Button @click="handleLoad">load</Button>
+            {{ v1 }}
         </i-col>
-        <i-col span="6">
+        <i-col span="4">
             <Cascader :data="data3" filterable v-model="v1"></Cascader>
             <!--<Cascader :data="data2" filterable v-model="v1" :loadData="loadData"></Cascader>-->
         </i-col>
@@ -14,12 +15,14 @@
         data () {
             return {
                 v1: [],
-                data2: [{
+                data2: [
+                    {
                         value: 'zhejiang',
                         label: '浙江',
                         children: [],
                         loading: false
-                }, {
+                    },
+                    {
                         value: 'jiangsu',
                         label: '江苏',
                         children: [{
@@ -30,7 +33,8 @@
                                 label: '中华门'
                             }]
                         }]
-                }],
+                    }
+                ],
                 data3: [{
                     value: 'beijing',
                     label: '北京',
@@ -67,6 +71,7 @@
                             label: '苏州',
                             children: [
                                 {
+                                    disabled: true,
                                     value: 'zhuozhengyuan',
                                     label: '拙政园',
                                 },

src/components/cascader/cascader.vue

@@ -5,7 +5,8 @@
                 <i-input
                     :readonly="!filterable"
                     :disabled="disabled"
-                    v-model="displayRender"
+                    :value="displayRender"
+                    @on-change="handleInput"
                     :size="size"
                     :placeholder="placeholder"></i-input>
                 <Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSelect"></Icon>
@@ -16,12 +17,23 @@
             <Drop v-show="visible">
                 <div>
                     <Caspanel
+                        v-show="!filterable || (filterable && query === '')"
                         ref="caspanel"
                         :prefix-cls="prefixCls"
                         :data="data"
                         :disabled="disabled"
                         :change-on-select="changeOnSelect"
                         :trigger="trigger"></Caspanel>
+                    <div :class="[prefixCls + '-dropdown']" v-show="filterable && query !== ''">
+                        <ul :class="[selectPrefixCls + '-dropdown-list']">
+                            <li
+                                :class="[selectPrefixCls + '-item', {
+                                    [selectPrefixCls + '-item-disabled']: item.disabled
+                                }]"
+                                v-for="(item, index) in querySelections"
+                                @click="handleSelectItem(index)">{{ item.label }}</li>
+                        </ul>
+                    </div>
                 </div>
             </Drop>
         </transition>
@@ -37,6 +49,7 @@
     import Emitter from '../../mixins/emitter';
 
     const prefixCls = 'ivu-cascader';
+    const selectPrefixCls = 'ivu-select';
 
     export default {
         name: 'Cascader',
@@ -100,11 +113,13 @@
         data () {
             return {
                 prefixCls: prefixCls,
+                selectPrefixCls: selectPrefixCls,
                 visible: false,
                 selected: [],
                 tmpSelected: [],
                 updatingValue: false,    // to fix set value in changeOnSelect type
-                currentValue: this.value
+                currentValue: this.value,
+                query: ''
             };
         },
         computed: {
@@ -128,6 +143,32 @@
                 }
 
                 return this.renderFormat(label, this.selected);
+            },
+            querySelections () {
+                let selections = [];
+                function getSelections (arr, label, value) {
+                    for (let i = 0; i < arr.length; i++) {
+                        let item = arr[i];
+                        item.__label = label ? label + ' / ' + item.label : item.label;
+                        item.__value = value ? value + ',' + item.value : item.value;
+
+                        if (item.children && item.children.length) {
+                            getSelections(item.children, item.__label, item.__value);
+                            delete item.__label;
+                            delete item.__value;
+                        } else {
+                            selections.push({
+                                label: item.__label,
+                                value: item.__value,
+                                item: item,
+                                disabled: !!item.disabled
+                            });
+                        }
+                    }
+                }
+                getSelections(this.data);
+                selections = selections.filter(item => item.label.indexOf(this.query) > -1);
+                return selections;
             }
         },
         methods: {
@@ -146,7 +187,7 @@
             toggleOpen () {
                 if (this.disabled) return false;
                 if (this.visible) {
-                    this.handleClose();
+                    if (!this.filterable) this.handleClose();
                 } else {
                     this.onFocus();
                 }
@@ -177,6 +218,19 @@
                         });
                     });
                 }
+            },
+            handleInput (event) {
+                this.query = event.target.value;
+            },
+            handleSelectItem (index) {
+                const item = this.querySelections[index];
+
+                if (item.item.disabled) return false;
+                this.query = '';
+                const oldVal = JSON.stringify(this.currentValue);
+                this.currentValue = item.value.split(',');
+                this.emitValue(this.currentValue, oldVal);
+                this.handleClose();
             }
         },
         created () {

src/styles/components/cascader.less

@@ -49,6 +49,10 @@
 
     .select-item(@cascader-prefix-cls, @cascader-item-prefix-cls);
 
+    &-dropdown{
+        padding: 5px 0;
+    }
+
     &-menu{
         display: inline-block;
         min-width: 100px;