vue实现autoComplete组件

我就是我 2022-05-26 10:40 479阅读 0赞

**需要掌握的技术点**  
1、采用mock服务器  
2、实现下拉自动匹配，和其他列表的自动匹配  
3、在输入法输入的时候，页面的输入框不监听输入法中的内容

**研究方法：**  
1、查看开源代码如何实现  
2、记录研究过程中的知识点

**知识补充：**  
1、compositionstart 事件触发于一段文字的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）。  
2、compositionupdate 事件触发于字符被输入到一段文字的时候（这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）  
3、compositionend 当文本段落的组成完成或取消时, compositionend 事件将被激发 (具有特殊字符的激发, 需要一系列键和其他输入, 如语音识别或移动中的字词建议)。

这里注意compositionstart这些事件，  
**如果要在vue子组件上监听，那么需要加.native修饰符。**  
**但是要是在原生DOM上监听，就不需要加.native属性了。**

通过this.isOnComposition作为开关，控制节流函数。

handleComposition(event) {
         if (event.type === 'compositionend') {
              this.isOnComposition = false;
              this.handleChange(event);
          } else {
              this.isOnComposition = true;
          }
    },

接收真实的数据

handleChange(event) {
        let value = event.target.value;
        if(!this.isOnComposition){
            this.getData(value);
        }
    },

节流函数。  
节流函数开源的有两种，一种是lodash中的，还有一种是element UI中的节流插件。在比较了两者的区别后，个人认为虽然lodash是著名的开源库，但是它的节流函数真的没有element UI中的插件好用。

this.getData = debounce(this.debounce, (value) => { this.returnValue(value); });

列表的自动匹配  
使用原生列表的备份，借助过滤器查询。

createLayerList(value){
       value = value.trim().toLowerCase();
        let tempArray = [];
        tempArray = this.layerListBackUp.filter(item =>{
            item = item.showName.trim().toLowerCase();
            if(item.indexOf(value)> -1){
                return true;
            }
        });
        this.layerList = JSON.parse(JSON.stringify(tempArray));
    }

下一期研究什么呢？  
研究mock服务，以及深入阐释为什么lodash的节流函数不好用，以及为何element ui的节流函数好用，