手撸输入框多选功能

手撸输入框多选功能
简单的样式

<style>
        *{
            margin: 0;
            padding: 0;
        }
      .performance_box{
        width:450px;
        height: 151px;
        background:rgba(255,255,255,1);
        box-shadow:0px 4px 12px 0px rgba(0,0,0,0.2);
        border-radius:4px; 
        position: absolute;
        top:0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        height: max-content;
      }
      .performance_header{
        height: 54px;
      }
      .performance_header_text{
        height:24px;
        font-size:16px;
        font-family:PingFangSC;
        font-weight:500;
        color:rgba(0,0,0,0.85);
        line-height:24px;
        display: inline-block;
        margin: 15px 24px;

      }
      .performance_header_after{
          float: right;
          margin: 16px 15px;
          color:rgba(0, 0, 0, 0.25);
          cursor: pointer;
      }
      .performance_header_main{
          min-height: 42px;
          border-top: 1px solid rgba(0,0,0,0.09);
          border-bottom: 1px solid rgba(0,0,0,0.09);
      }
      .my_performance_jinzhi>i{
          /* margin: 12px 24px; */
          display: inline-block;
          cursor: pointer;
      }
      .my_performance_jinzhi{
          display: flex;
          width:12px;
          height:12px;
          color:rgba(250,74,11,1);
          margin-left: 24px;
          margin-right: 8px;
          box-sizing: border-box;
          cursor: pointer;
      }
      .my_performance_input{
        
        display: inline-block;
        border:1px solid rgba(217,217,217,1);
          width:240px;
        height:31px;
        background:rgba(255,255,255,1);
        border-radius:4px;
        overflow: auto;
        margin-top: 5px;
        margin-top: 5px;
        text-align: left;
        line-height: 31px;
        padding-left: 10px;
        font-size:12px;
        font-family:PingFangSC;
        font-weight:400;
        color:rgba(153,153,153,1);
      }
      .my_performance_text{
        display: inline-block;
          width:240px;
        height:33px;
        background:rgba(255,255,255,1);
        overflow: auto;
        margin-top: 5px;
        margin-top: 5px;
        text-align: left;
        line-height: 33px;
        padding-left: 10px;
        font-size:12px;
        font-family:PingFangSC;
        font-weight:400;
        color:rgba(153,153,153,1);
        display: none;
      }
      .my_performance_tubiao01_after{
        width:12px;
        height:12px;
        color:rgba(153,153,153,1);
        float: right;
        margin-right: 20px;
        cursor: pointer;
        display: flex;
        margin-left: 135px;

      }
      .performance_header_haveData{
          /* display: block; */
          position: relative;
          display: flex;
          align-items: center;
      }
      .performance_header_haveData:nth-last-child(1){
          margin-bottom: 5px;
      }
      .performance_header_noData{
        font-size:12px;
        font-family:PingFangSC;
        font-weight:400;
        color:rgba(153,153,153,1);
        width: 100%;
        min-height:43px;
        text-align:center;
        line-height: 43px;
        display: none;
      }
      .performance_foot{
        height: 54px;
        width: 450px;

      }
      .add_row_box{
          display: inline-block;
          cursor: pointer;
      }
      .performance_foot .performance_icon-jiahao_before{
        width:12px;
        height:12px;
        display: inline-block;
        color:rgba(245,136,35,1);
        margin-top: 16px;
        margin-left: 24px;
        margin-right: 5px;
      }
      .add_row{
        font-size:14px;
        font-family:PingFangSC;
        font-weight:400;
        color:rgba(245,136,35,1);
        margin-top: 15px;
      }
      .performance_btn_quxiao{
        float: right;
        width:64px;
        height:31px;
        background:rgba(255,255,255,1);
        border-radius:4px;
        text-align: center;
        line-height: 32px;
        border:1px solid rgba(217,217,217,1);
        margin-top: 10px;
        margin-right: 8px;
        color:rgba(0,0,0,0.65);
        cursor: pointer;
      }
      .performance_btn_queding{
        float: right;
        width:65px;
        height:32px;
        background:rgba(245,136,35,1);
        border-radius:4px;
        text-align: center;
        line-height: 32px;
        margin-top: 10px;
        margin-right: 10px;
        color:rgba(255,255,255,1);
        cursor: pointer;
      }
      /* 确定删除 */
      .performance_header_sanchu{
        position: absolute;
        left: 0px;
        top:54px;
        width:219px;
        height:150px;
        background:rgba(255,255,255,1);
        box-shadow:0px 4px 12px 0px rgba(0,0,0,0.2);
        border-radius:4px;
        cursor: pointer;
        display: none;
        z-index: 100;
      }
      .performance_header_sanchu_header{
          width: 213px;
          height: 53px;
          text-align: center;
          line-height:53px;
      }
      .performance_header_sanchu_header span:nth-of-type(1){
        font-size:16px;
        font-family:PingFangSC;
        font-weight:500;
        color:rgba(0,0,0,0.85);
      }
      .performance_header_sanchu_header span:nth-of-type(2){
        font-size: 8px;
        float: right;
        margin-right: 4px;
        color: rgba(0, 0, 0, 0.25);
      }
      .performance_header_sanchu_text{
          height: 42px;
          border-top: 1px solid rgba(232, 232, 232, 1);
          border-bottom: 1px solid rgba(232, 232, 232, 1);
          text-align: center;
          line-height: 42px;
          font-size:12px;
        font-family:PingFangSC;
        font-weight:400;
        color:rgba(51,51,51,1);
      }
      .performance_header_sanchu_queding{
        width:195px;
        height:32px;
        background:rgba(245,136,35,1);
        border-radius:4px;
        margin: auto;
        margin-top: 10px;
        text-align: center;
        line-height: 32px;
        font-size:14px;
        font-family:PingFangSC;
        font-weight:400;
        color:rgba(255,255,255,1);
      }
      /* 搜索框 */
      .performance_header_select{
          display: inline-block;
          border:1px solid rgba(217,217,217,1);
          width:240px;
        height:31px;
        background:rgba(255,255,255,1);
        border-radius:4px;
        overflow: auto;
      }
      .performance_header_sousuo{
        position: absolute;
        background: #ffffff;
        overflow: hidden;
        min-width: 194px;
        transform-origin: center top;
        z-index: 1000;
        top: 40px;
        left:39px;
        border: 1px solid #e4e7ed;
        border-radius: 4px;
        background-color: #fff;
        -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 5px ;
        display: none;        
      }
      .performance_header_option{
        position: relative;
        overflow: scroll;
      }
      .performance_header_option >dl{
        width: 240px;
        max-height: 160px;
        margin: 0;
        overflow: auto;
            }
        .performance_header_option >dl dd{
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        padding: 0 20px;
        font-size: 14px;
        color: #606266;
        box-sizing: border-box;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 32px;
        line-height: 32px;
        }
        .performance_header_option >dl dd:hover{
        background-color: #f5f7fa;
        } 
        .performance_header_list  dd>span{
            color: rgba(245,136,35,1);
            float:right;
            display: none;
        }
        .performance_header_list_selected_span{
            display: inline-block;
            box-sizing: border-box;
            border-color: transparent;
            margin: 3px 0px 2px 0px;
            background-color: #f0f2f5;
            border-radius: 4px;
            height: 24px;
            margin-right: 4px;
        }
        .performance_header_list_selected_spanText{
            display: inline-block;
            height: 24px;
            padding: 0 8px;
            max-width: 80px;
            text-align: center;
            line-height: 24px;
            overflow: hidden;/*超出部分隐藏*/
            text-overflow:ellipsis;/* 超出部分显示省略号 */
            white-space: nowrap;/*规定段落中的文本不进行换行 */
            /* width: 50px;需要配合宽度来使用f */
        }
        .performance_header_list_selected_str_close:hover{
            background: rgba(245,136,35,1);
            color: #fff;
        }
        .performance_header_list_selected_str_close{
            margin: 0px 5px;
            float: right;
            line-height: 24px;
        }

  **html结构**

```css

```javascript
 `<div class="performance_box">
    <!-- 头部显示 -->
    <div class="performance_header">
        <span class="performance_header_text">当月期数设置</span>
        <span class="performance_header_after"><i class="iconfont icon-close my_performance_close"></i></span>
    </div>
    <!-- 主数据区 -->
    <div class="performance_header_main">
        <!-- 有数据时 -->
        <div class="performance_header_haveData" index="0">
        <span class="my_performance_jinzhi"><i class="iconfont icon-jinzhi "></i></span>
        <!-- <div class="performance_header_select"> -->
            <div class="my_performance_input">请选择当月核算期数</div>
            <!-- 确定后的状态 -->
            <div class="my_performance_text"></div>
        <!-- </div> -->
        <!-- 搜索框 -->
        <div class="performance_header_sousuo">
          <div class="performance_header_option">
            <dl class="performance_header_list">
             <dd key-item="0">html <span class="performance_header_list_selected"><i class="iconfont icon-check "></i></span></dd>
             <dd key-item="1">javascript <span class="performance_header_list_selected"><i class="iconfont icon-check "></i></span></dd>
             <dd key-item="2">css <span class="performance_header_list_selected"><i class="iconfont icon-check "></i></span></dd> 
             </dl>
                </div>
            </div>           
        <span class="my_performance_tubiao01_after"><i class="iconfont icon-tubiao01 my_performance_icon-tubiao01 "></i></span>        
        </div>
        <!-- 没有数据时显示 -->
        <div class="performance_header_noData">暂无核算组</div>
        <!-- 弹出确定删除弹窗 -->
        <div class="performance_header_sanchu">
            <div class="performance_header_sanchu_header">
                <span class="performance_header_sanchu_heshuanzu">删除核算组</span>
                <span class="performance_header_sanchu_close"><i class="iconfont icon-close"></i></span>
            </div>
            <div class="performance_header_sanchu_text">确定要删除当前核算组吗？</div>
            <div class="performance_header_sanchu_queding">确定</div>
        </div>
    </div>
    <!-- 脚步按钮区 -->
    <div class="performance_foot">
        <div class="add_row_box">
                <span class="performance_icon-jiahao_before"><i class="iconfont icon-jiahao my_performance_con-jiahao "></i></span>
                <span class="add_row">添加核算组</span>
        </div>
        <span class="performance_btn_queding">确定</span>
        <span class="performance_btn_quxiao">取消</span>        
    </div>
</div>`

  jquery写的js部分

```javascript
 <script>
    

 $(document).ready(function () { 
        //  点击删除弹出层
    $('.performance_header_main').delegate('.my_performance_jinzhi','click',function(e){
        e.stopPropagation()
        $('.performance_header_sanchu').show();
            var index = $(this).parents('.performance_header_haveData').attr('index');
            $('.performance_header_sanchu').attr('index',index);
        })   
        // 点击确定删除
        $('.performance_header_sanchu_queding').click(function(){
            $('.performance_header_sanchu').hide();
            var index = $(this).parents('.performance_header_sanchu').attr('index');
            // console.log($('.performance_box .performance_header_haveData[index='+index+']'))
            $('.performance_box .performance_header_haveData[index='+index+']').remove();
            if(!$('.performance_box .performance_header_haveData')[0]){
                $('.performance_header_noData').show();
            }else{
                $('.performance_header_noData').hide();
            }
        })
        // 关闭删除弹出层
        $('.performance_header_sanchu_close').click(function(){
            $('.performance_header_sanchu').hide();
        })
        // 新增核算组
        $('.add_row_box').click(function(){
            reset_state();
            var performance_header_main_data_str = ` <div class="performance_header_haveData" index="${$('.performance_box .performance_header_haveData').length}">
        <span class="my_performance_jinzhi"><i class="iconfont icon-jinzhi "></i></span>
        <div class="my_performance_input">请选择当月绩效核算期数</div>
        <div class="my_performance_text"></div>
        <div class="performance_header_sousuo">
          <div class="performance_header_option">
            <dl class="performance_header_list">
             <dd key-item="0">html <span class="performance_header_list_selected"><i class="iconfont icon-check "></i></span></dd>
             <dd key-item="1">javascript <span class="performance_header_list_selected"><i class="iconfont icon-check "></i></span></dd>
             <dd key-item="2">css <span class="performance_header_list_selected"><i class="iconfont icon-check "></i></span></dd>
             </dl>
                </div>
            </div>           
        <span class="my_performance_tubiao01_after"><i class="iconfont icon-tubiao01 my_performance_icon-tubiao01 "></i></span>        
        </div>`
        $('.performance_box .performance_header_main').append(performance_header_main_data_str);
         // 判断是否存在组
         if($('.performance_box .performance_header_haveData')[0]){
                $('.performance_header_noData').hide();
            }
        })
        //    失焦事件
           $('.mask').click(function (){       
        $('.performance_header_sousuo').hide();
       $('.my_performance_input').css({
        'border':'1px solid rgba(217,217,217,1)'
       })         
    })
    // 阻止事件冒泡
    $('.performance_header_main').delegate('.my_performance_input','click',function(e){
        e.stopPropagation();
    })
        //  实时监听输入框
        $('.performance_header_main').delegate('.performance_header_haveData .my_performance_input','click',function(e){
            e.stopPropagation();
            $(this).parents('.performance_header_haveData').find('.my_performance_input').css({
                'border':'1px solid rgba(245,136,35,1)'
            })
            $(this).parents('.performance_header_haveData').find('.performance_header_sousuo').show();
            $(this).parents('.performance_header_haveData').siblings().find('.performance_header_sousuo').hide();
        })
        // 阻止事件冒泡
    $('.performance_header_main').delegate('.performance_header_haveData .performance_header_sousuo','click',function(e){
        e.stopPropagation();
    })
        
        $('.performance_header_main').delegate('.performance_header_haveData .performance_header_sousuo .performance_header_option .performance_header_list dd','click',function(){
            
            var performance_header_list_selected_str = '<span class="performance_header_list_selected_span" key-index='+$(this).attr('key-item')+'><span class="performance_header_list_selected_spanText">'+ this.innerText+'</span><i class="iconfont icon-close performance_header_list_selected_str_close"></i></span>'
            // 判断初始值
                if($(this).children('.performance_header_list_selected').css("display") == 'none' ){
                    $(this).children('.performance_header_list_selected').show();
                    if( $(this).parents('.performance_header_haveData').find('.my_performance_input .performance_header_list_selected_span')[0]){
            $(this).parents('.performance_header_haveData').find('.my_performance_input ').append(performance_header_list_selected_str)
            }else{
                $(this).parents('.performance_header_haveData').find('.my_performance_input ').html('');
                $(this).parents('.performance_header_haveData').find('.my_performance_input ').append(performance_header_list_selected_str)
                    }
                }              
        })
        // 点击删除节点
        $('.performance_header_main').delegate('.my_performance_input .performance_header_list_selected_span .performance_header_list_selected_str_close','click',function(){
            var dom = $(this).parents('.performance_header_haveData');
            $(this).parents('.performance_header_haveData').find('.performance_header_sousuo dd').eq($(this).parent('.performance_header_list_selected_span').attr('key-index')).find('span').hide();
            $(this).parent('.performance_header_list_selected_span').remove();
            if(!dom.find('.my_performance_input .performance_header_list_selected_span')[0]){
                dom.find('.my_performance_input ').html('请选择当月绩效核算期数');
            }
        })
         // 确定后显示状态
         $('.performance_header_main').delegate('.performance_header_haveData .my_performance_tubiao01_after','click',function(){
            reset_state();
             $(this).parents('.performance_header_haveData').find('.my_performance_input').show();
             $(this).parents('.performance_header_haveData').find('.my_performance_text').hide();
         })
        //  点击重置一个新方法 clickThis 点击当前
        function reset_state(clickThis){
            // $('.performance_header_main').delegate('.performance_header_haveData .my_performance_tubiao01_after','click',function(){
                $.each($('.performance_box .performance_header_haveData'),function(i,value){
                    var myli = $(this).find('.my_performance_input .performance_header_list_selected_spanText')
                    var strTexts = '';
                    $.each(myli,function(){
                        if(strTexts == ''){
                            strTexts += $(this).text();
                        }else{
                            strTexts += '+'+$(this).text();
                        } 
                    })
                    if(strTexts == ''){
                        strTexts = '-'
                    }
                    $(this).find('.my_performance_text').html(strTexts); 
                    $(this).find('.my_performance_input').hide()
                    $(this).find('.my_performance_text').show();
                })
        }
     });
    </script>

记录保存手撸不容易啊，其实运用到项目里远比这复杂，先写这么多！嘻嘻