添加标签 功能的前端实现

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css'/>
<style>
    a{ text-decoration: none; color: #333;}
    em{font-style: normal}
    #articleTagInput{ border: none; outline: none; width: 100%;}
    .TagInput_box{ border: 1px solid #eee;  background: #fff; padding: 4px;}
    #search_result{ display: block; position: absolute; background: #fff; width: 156px; box-shadow: rgba(121, 99, 223, .5) 0 0 5px; padding: 4px; border-radius: 4px;}
    #search_result input:hover{ background: #f0f0f0; cursor: pointer;}
    #search_result input{ border: none;}
    .tag_tx{ background: #7963df; color: #fff; margin: 3px; padding: 2px 5px; display: inline-block; border-radius: 3px;}
    .tag_tx a{  color: #fff;  padding-right: 2px; }
    .tips{ color: #999 }
</style>


<div class="tag_box">
    <div class="tips">提示: 按 "，" 逗号键分隔标签</div>
    <div class="TagInput_box input-large">
        <volist name="tres.tag" id="vo">
            <div class="tag_tx"><span class='tag_name'>{$vo.name}</span><a href="javascript:;" title="删除"> x </a> </div>
        </volist>
        <input type="text" id="articleTagInput" placeholder="输入标签" autocomplete="off">
    </div>
    <div id="search_result" style="display:none"></div>
    <div id="tInputContainer" style="display:none">
        <input type="text" id="tag_result" name="tag_result">
    </div>
    <div onclick="submit_tag()">提交</div>
</div>

<script>
    $(function(){
        var i  = 0;
        $('#articleTagInput').keyup(function(e){
            var input_area = $('#articleTagInput'); // 获取输入框
            var input_str = $('#articleTagInput').val();
            // console.log(input_str);
            tag_search_ajax(input_str);
            
            var keyNum = window.event ? e.keyCode : e.which;   //获取被按下的键值
            if (keyNum==188){ // 按下,号键
                $('#search_result').css('display','none');
                i++;
                input_str = input_str.substring(0,input_str.length-1);
                // console.log(input_str);
                var new_el = ` <div class="tag_tx" data_id=`+ i +`><span class='tag_name'>`+input_str+`</span><a href="javascript:;" title="删除"> x </a> </div> `;
                $(input_area).before(new_el);
                $(input_area).val('');
            }

            bind_del_tag();   // 绑定删除方法
        })

        $('#articleTagInput').on('click',function(){ tag_search_ajax(); });    // 点击输入框，ajax请求标签

        function tag_search_ajax(_str){
            $.ajax({
                method: 'POST',
                url: 'url',
                data: {'tag_search':_str},
                success: function(data){
                    // console.log(data);
                    if(data == null) {  // 如果搜索结果不存在
                        return
                    }
                    var res = '';
                    for(var i=0; i<data.length; i++){
                        res += `<input type="text" name="tag_id[`+ data[i]['id'] +`]" value="`+ data[i]["name"] +`">`;
                    }

                    $('#search_result').css({'display':'block'});
                    $('#search_result').html(res);

                    // 点击搜索结果，将点击的val 放入搜索框
                    $('#search_result input').on('click', function(){
                        var val = $(this).val();
                        var name = $(this).attr('name');
                        var new_el = ` <div class="tag_tx" data_id=`+ i +`><span class='tag_name'>`+val+`</span><a href="javascript:;" title="删除"> x </a> </div> `;
                        // var new_el = ` <div class="tag_tx">`+val+`<a href="javascript:;" title="删除"> x </a></div> `;
                        $('#articleTagInput').before(new_el);
                        $('#articleTagInput').val('');

                        $('#search_result').css('display','none');
                        
                        bind_del_tag();   // 绑定删除方法
                    });
                }
            })
        }

        // 标签绑定删除方法
        function bind_del_tag(){
            $('.tag_tx a').on('click',function(){
                $(this).parent('.tag_tx').remove();
            })
        }
        bind_del_tag()

        submit_tag = function(){
            var all_tag = $('.tag_name');
            var _result = '';
            for (let i = 0; i < all_tag.length; i++) {
                // const element = all_tag[index];
                var tag_name = $(all_tag[i]).text();     // 获取标签名
                _result += ','+tag_name;                 // 拼接成以','分割的字符串
            }
            // console.log(_result);

            // 去掉首个,逗号
            if(_result[0]==','){
                _result = _result.substring(1,_result.length);
            }
            // console.log(_result);
            
            $.ajax({
                method: 'POST',
                url: 'url',
                async: false,
                data: {'name':_result},
                success: function(data){
                    // console.log(data);

                    var tag_obj = [];
                    _result = _result.split(','); // tag array
                    for (let i = 0; i < data.length; i++) {
                        tag_obj[i]={};
                        tag_obj[i][data[i]]=_result[i];
                    }
                    
                    // console.log('_result: ',tag_obj);
                    // console.log(typeof(tag_obj));

                    tag_obj = JSON.stringify(tag_obj);
                    // console.log('_result: ',tag_obj);
                    $('#tag_result').val(tag_obj);    // "[{"4":"挽回爱情"},{"7":"挽回男友"},{"9":"挽回老公"}]"
                }
            })
        }

        $(document).on('click',function(){
            $('#search_result').css('display','none')
        })
    })
</script>

最后

以上就是迅速彩虹为你收集整理的添加标签 功能的前端实现的全部内容，希望文章能够帮你解决添加标签 功能的前端实现所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。