Vue组件 - 智能联想输入框

原文链接：点我

已经有很多成熟的智能输入框组件，如Form.js。但是现在MVVM框架，如vue、react的为了实现双向数据绑定会重绘所有的元素，这样就会难以兼容使用。所以笔者开发了Vue组件-智能输入框。

包含的功能大同小异：

1. 获得焦点时显示所有备选项
2. 失去焦点时隐藏备选项面板
3. 输入字符后，检索可能的备选项
4. 支持上下键和回车键进行选中
5. 支持点击选中
6. 支持多选
7. 以逗号进行多选的分割

效果图:

图1：

图2：

智能输入框组件封装

将Vue组件封装到js文件中，smartInput.js:

// 智能输入框Vue组件
Vue.component('smart-input', {
    template: `<div class="friendSearchContainer">
        <input v-model="input" class="form-control smartInput"
            placeholder="输入文本自动检索，上下键选取，回车选中，可点选"
            data-toggle="tooltip" @click="init" @keydown="search" @blur="blur" />
        <ul v-show="searching" class="friendSearchList">
            <p v-if="!filtered.length">空数据</p>
            <li v-else v-for="(item, index) in filtered" @click.stop="clickOne">{{ item }}</li>
        </ul>
        <div v-show="searching" class="friendSearchModal" @click="searching=false"></div>
    </div>`,
    // 接收list/multiple/value参数
    props: ['props'],
    data() {
        return {
            searching: false,
            timer: null,
            filtered: {},
            input: '',
            focusIndex: 0,
            invalidData: ''
        };
    },
    computed: {
        listLength() {
            return this.filtered.length;
        },
        key() {
            return /(?:.*,)*(.*)$/.exec(this.input)[1];
        }
    },
    mounted() {
        // 支持初始化参数值
        this.input = this.props.value || '';
    },
    methods: {
        // 调整联想搜索面板的大小和位置
        init(e) {
            this.searching = true;
            this.filtered = this.props.list;
        },
        // 失去焦点时关闭面板，主要是按下tab键切换时的作用，随之带来的是所有相关的事件都要清除该定时器
        blur() {
            this.timer = setTimeout(() => {
                this.searching = false;
            }, 200);
        },
        // 在上下键索引后调整视口
        scrollViewport() {
            let ul = $(this.$el).find('ul');
            ul.find('li.hover').removeClass('hover');
            ul.find('li').eq(this.focusIndex).addClass('hover');
            $('.friendSearchList').scrollTop(this.focusIndex * 26 - 26);
        },
        // 联想搜索的主体功能函数，这里使用keydown是为了保证持续性的上下键能够保证执行
        search(e) {
            let preSearching = this.searching;
            // 非搜索状态进行点击，则呼出面板
            if (!this.searching) {
                this.searching = true;
            }
            e = e || window.event;
            // 通过上下键和回车选择
            if (e.keyCode === 38) {
                this.focusIndex = (this.focusIndex - 1 + this.listLength) % this.listLength;
                this.scrollViewport();
            } else if (e.keyCode === 40) {
                this.focusIndex = (this.focusIndex + 1 + this.listLength) % this.listLength;
                this.scrollViewport();
            } else if (e.keyCode === 13) {
                if (preSearching && this.focusIndex < this.listLength) {
                    this.selectOne();
                }
            } else {
                // 延时搜索，降低卡顿
                clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    // 进行可选项过滤
                    this.filtered = this.props.list.filter(item => {
                        return item.toLowerCase().includes(this.key.toLowerCase());
                    });
                    this.focusIndex = 0;
                }, 800);
            }
        },
        clickOne(e) {
            let target = $((e || event).target);
            clearTimeout(this.timer);
            e = e || window.event;
            let value = target.text();
            this.focusIndex = target.index();
            if (this.props.multiple) {
                let arr = this.input.split(',');
                let has = target.hasClass('active');
                if (has) {
                    target.removeClass('active');
                    let index = arr.indexOf(value);
                    arr.splice(index, 1);
                    this.input = arr.join(',');
                } else {
                    target.addClass('active');
                    arr.splice(arr.length - 1, 1, value);
                    this.input = arr.join(',') + ',';
                }
            } else {
                target.addClass('active').siblings('li').removeClass('active');
                this.input = value;
                this.searching = false;
            }
        },
        // 选择一个参数
        selectOne(e) {
            clearTimeout(this.timer);
            let target = $(this.$el).find('ul li').eq(this.focusIndex);
            let value = target.text();
            if (this.props.multiple) {
                let arr = this.input.split(',');
                let has = target.hasClass('active');
                if (has) {
                    target.removeClass('active');
                    let index = arr.indexOf(value);
                    arr.splice(index, 1);
                    this.input = arr.join(',');
                } else {
                    target.addClass('active');
                    arr.splice(arr.length - 1, 1, value);
                    this.input = arr.join(',') + ',';
                }
            } else {
                target.addClass('active').siblings('li').removeClass('active');
                this.input = value;
                this.searching = false;
            }
        }
    },
    watch: {
        input(val) {
            let inputArr = val.split(',');
            if (this.props.multiple) {
                inputArr.pop();
                let invalidData = [];
                inputArr.forEach(item => {
                    if (!this.props.list.includes(item)) {
                        invalidData.push(item);
                    }
                });
                let $input = $('input', $(this.$el));
                if (invalidData.length) {
                    $input.attr('title', invalidData.join(',') + '数据不合法');
                    $input.tooltip();
                } else {
                    $input.tooltip('hide');
                }
            }
            // 触发标签内声明的sync函数，用于传递数据给父组件
            this.$emit('sync', this.input);
        }
    }
});

将样式表封装为smartInput.css:

// smartInput输入框需要的样式表
.friendSearchContainer {
    position: relative;
}
.friendSearchList {
    width: 100%;
    padding: 6px 12px;
    overflow-y: scroll;
    max-height: 300px;
    background: #fff;
    z-index: 10;
    box-shadow: 0 10px 10px rgba(0, 0, 0, .2);
    border: 1px solid #ccc;
    position: absolute;
}
.friendSearchList li {
    padding: 3px 12px;
}
.friendSearchList li:hover {
    background-color: #36bc7f;
    color: #fff;
}
.friendSearchList li.active {
    background: #337ab7;
    color: #fff;
}
.friendSearchList li.hover {
    background-color: #36bc7f;
    color: #fff;
}
.friendSearchList li.active:hover {
    background-color: #36bc7f;
}
.friendSearchModal {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

使用方式:

1. 在页面中引入vue.js和bootstrap库
2. 在页面中引入smartInput.js和smartInput.css
3. 在你的页面中建立vue对象：new Vue({el: '#root'})
4. 在root根组件里直接添加<smart-input>标签即可

实例：

在html页面里新建DOM，直接包含<smart-input></smart-input>标签即可：

<div role="tabpanel" class="tab-pane active" id="flowDispatch">
     <div class="row">
          <div class="col-md-6">
               <div class="form-group">
                    <label for="service" class="col-sm-2 control-label">业务：</label>
                    <div class="col-sm-10">
                          <smart-input id="service" placeholder="Email" @sync="syncService" :props="serviceList"></smart-input>
                    </div>
               </div>
           </div>
           <div class="col-md-6">
                <div class="form-group">
                     <label for="service" class="col-sm-2 control-label">地区：</label>
                     <div class="col-sm-10">
                          <smart-input id="service" placeholder="Email" @sync="syncArea" :props="areaList"></smart-input>
                     </div>
                 </div>
           </div>
      </div>
</div>

在index.js里初始化Vue对象：

$(function () {
    let flowDispatch = new Vue({
        el: '#flowDispatch',
        data: {
            serviceList: {
                list: ['apk','pcs','opencdn','kafka','cdn','ssl'],
                // 支持参数多选
                multiple: true
            },
            service: '',
            areaList: {
                list: ['河北','河南','山东','天津','重庆','全国'],
                // 支持初始值设定
                value: '我是初始值'
            },
            area: ''
        },
        mounted() {
            this.init();
        },
        methods: {
            // 初始化页面参数
            init() {
                // 接口获取数据列表，而不是硬写死
                // this.getArea();
            },
            // 获取地区列表
            getArea() {
                OSS.apiAjaxAccess({
                    url: '?r=gslb/api/area',
                    statusCodeCheck: true,
                    success: data => {
                        this.areaList.list = data.data;
                    }
                });
            },
            // 跟智能输入框同步选中的业务
            syncService(data) {
                this.service = data;
            },
            syncArea(data) {
                this.area = data;
            },
        }
    });
});

接口文档

我们只需要在初始化的vue对象里设置好相关的属性即可生效：

serviceList: {
    list: ['apk','pcs','opencdn','kafka','cdn','ssl'],
    multiple: true,
    value: '我是初始值'
},

暂时只支持这3个参数。

后续需要完善的功能:

1. 支持自定义分割符，添加参数delimiter: '-'
2. 支持数据校验（不合法的不允许输入），添加参数stric: true
3. 完善接口文档和补充在线测试用例