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;