原生js实现input搜索框实时检索功能实现，支持选中或回车生成tag标签（超简单）

问题：实现input搜索框实时检索的功能，支持回车或选中后生成tag标签，公司设计出功能需求后，在市场上没找到差不多类似的，只能手撸一个了

解决方法：

1、参考网上文章：input中回车生成标签实现及分析_vue input中回车生成标签-CSDN博客

但是会出现 appendchild 添加的li元素点击事件失效问题，使用事件委托也无法解决，最后采用for of 循环标签处理完成，细节部分还需要优化，比如外部传入组件的下拉联想数组可以替换，模糊搜索时判定laber名称返回value值等等

效果图

话不多说直接上代码

<template>
    <!-- class="h32InputRadius" -->
    <div class="TagInput">
        <el-select
            v-model="tagsArr"
            multiple
            collapse-tags
            ref="selectw"
            @focus = 'selectFocus()'
            placeholder="请选择">
        </el-select>
        <el-dialog :title="title" :visible.sync="voidVisible" width="480px" append-to-body>
            <!-- 外层div -->
            <div class="arrbox" @click="onclick">
                <div style="display: flex;justify-content: start;align-items: start;flex-wrap: wrap">
                    <!-- 标签 -->
                    <div v-for="(item,index) in tagsArr" :key="index" class="spanbox">
                        <span class="tagspan">{
  {item}}</span>
                        <i class="el-tag__close el-icon-close" @click="removeTag(index,item)"></i>
                    </div>
                    <!-- 输入框 -->
                     <div>
                        <input
                            :placeholder="placeholder"
                            v-model="currentval"
                            @keyup.enter="addTags"
                            :style="inputStyle"
                            class="inputTag blueInput"
                            ref="inputTag"
                            type="text"
                        />
                        <ul id="list">
                            <li index="1" v-for="(v,i) in data" :key="i" cl