话题 - 【OJ源码】css + javascript 实现tag标签的显示，插入和自动联想

### 效果
![1683002216437.png](/upload/image/20230502/20230502123656_9F009692FECA934D599AE3681C965250.png)
![1683001839854.png](/upload/image/20230502/20230502123039_AA522F04756591C24449EBF76BA35F68.png)

### CSS
```css
.tags ul{margin-bottom:1em;list-style-type:none;}
.tags ul li{list-style-type:none;}
.tags {display: block; padding: 1px 3px;}
.tags-sidebar{margin: 3px; line-height:28px;}
.tags a{
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border: 1px solid #DDD;
    background: #E6E6E6;
    padding: 2px 3px 2px 3px;
    margin-right: 3px;
    color: #454545!important;;
    text-decoration: none;
    white-space: nowrap;
    line-height: 24px;
	font-size: 13px;
}
.tags .tag-name{
	color: #454545;
}
.tags .tag-count{
    opacity: .85;
	position: relative;
    display: inline-block;
    min-width: 16px;
    padding: 3px 2px;
    margin: 0px auto;
    font-size: 12px;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #777;
	border-radius: 50%;
}
	
.tags a:hover {
	color: #454545;
	font-size: 13px;
	background-color: #DDD;
    text-shadow: 0px 0px 1px #000000;
    -moz-transition: all 0.2s linear 0s;
    -webkit-transition: all 0.2s linear 0s;
}
.input-tags {
	border-bottom-style:none;
	background: none transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none;
	z-index: 2;
	cursor: text;
	padding: 0;
	margin: 6px 0px 0px 6px;
}
.tags-autocomplete-select {
	z-index: 10;
	border: 1px solid #dfe3e9;
	border-radius: 3px;
	display: block;
	width: 100%;
	vertical-align: middle;
	padding: 3px;
}
.tags-autocomplete-select .icon {
	float: right;
	display: inline-block;
	width: 0;
	height: 0;
	margin: 12px 6px 0 6px;
	vertical-align: middle;
	border-top: 4px dashed;
	border-top: 4px solid\9;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}
.tags-autocomplete-select .label-item{
	display: inline-block !important;
	white-space: normal;
	vertical-align: top;
	padding: 6px 8px;
	margin-right: 3px;
	box-shadow: 0px 0px 0px 1px rgb(34 36 38 / 15%) inset;
	background-color: #EFEFEF;
	border: 0px solid transparent;
	border-radius: 0.28571429rem;
	color: #6a6a6a;
	cursor: pointer;
	text-decoration: none;
	line-height: 1;
}
.tags-autocomplete-select-menu{
	display: none;
	box-shadow: 0px 2px 3px 0px rgb(34 36 38 / 15%);
	border-radius: 0 0 3px 3px;
	cursor: auto;
	overflow-x: hidden;
	overflow-y: auto;
	border-top-width: 0px !important;
	outline: none;
	margin: 0px -1px;
	min-width: calc(100% + 2px );
	width: calc(100% + 2px );
	max-height: 200px;
	transition: opacity 0.1s ease;
	left: 0px;
	top: 0px;
	padding: 0px 0px;
	background: #FFFFFF;
	font-size: 1em;
	text-shadow: none;
	text-align: left;
	border: 1px solid rgba(34,36,38,0.15);
	z-index: 11;
}
.tags-autocomplete-select-item{
	line-height: 1.333;
	border-top: 1px solid rgb(250, 250, 250);
	position: relative;
	cursor: pointer;
	display: block;
	text-align: left;
	line-height: 1em;
	padding: 6px;
	-webkit-box-shadow: none;
	box-shadow: none;
	-webkit-touch-callout: none;
}
.tags-autocomplete-select-item:hover {
	background: #f7f8f9;
}
i.icon-delete {
	font-family: 'Icons';
	font-style: normal;
	cursor: pointer;
	margin-right: 0em;
	margin-left: 0.5em;
	font-size: 0.92857143em;
	opacity: 0.5;
	-webkit-transition: background 0.1s ease;
	transition: background 0.1s ease;
}
i.icon-delete:before {
	content: "X";
}
```

### html代码
```html
input框框输入tag，自动遇到逗号插入完整tag，同时支持自动联想tag并选择。
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/>
<style>
.ui-autocomplete-loading { background: white url('img/ui-anim_basic_16x16.gif') right center no-repeat; }
.ui-autocomplete {
max-height: 200px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
/* add padding to account for vertical scrollbar */
padding-right: 3px;

font-size:11px;
line-height: 12px;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 200px;
}
</style>
<div>
    <div class="tags-autocomplete-select">
        <input type="hidden" id="submit-tags" class="problem-tag" name="tagList" th:value="${message.tag}"/>
        <i class="icon"></i>
        <input type="text" id="input-tags" autocomplete="off" class="input-tags"/>
        <div class="tags-autocomplete-select-menu"></div>
    </div>
</div>
```
```html
显示tag
<div class="tags">
    <span th:each="tag : ${message.tags}">
         <a th:href="'/search?word=' + ${tag.name} + '&type=topic'" rel="tag" th:text="${tag.name}"></a>
    </span>
</div>
```

### JS代码
```javascript
$(document).ready(function(){
    var cache = {};
    function showSelectTags(tags) {
        $(".tags-autocomplete-select-menu").html("");
        $(".tags-autocomplete-select-menu").fadeIn();
        var opt = "";
        $.each(tags, function(i, event) {
            /* 过滤已经插入的tag */
            var tagList = $('#submit-tags').val().split(",");
            if (tagList.indexOf(tags[i]) == -1) {
                opt += "<div class=\"tags-autocomplete-select-item\" data-value=\""+ tags[i] +"\">" + tags[i] +"</div>";
            }
        });
        $(".tags-autocomplete-select-menu").html(opt);
    }
    function searchTags(word) {
        if ( word in cache ) {
            showSelectTags(cache[ word ]);
        } else {
		    /* api url可以替换为自己的地址，用户查询tag */
            $.getJSON("/api/tags/search",{q: word},function(json) {
                if (json.success != true) {
                    cache[ word ] = json.data;
                    showSelectTags(json.data);
                }
            });
        }
    }
    function insertShowTags(tags) {
        $.each(tags, function(i, event) {
            if (tags[i].length != 0) {
                var opt = "<a class=\"label-item\">" + tags[i] + "<i class=\"icon-delete\"></i></a>";
                $("#input-tags").before(opt);
            }
        });
    }

/* 清空输入框内容 */
        $("#input-tags").val("");

/* 插入tag到隐藏的input框 */
        updateSubmitTags();
    }

function initShowTags() {
        var tags = $('#submit-tags').val().split(",");
        insertShowTags(tags);
    }
    initShowTags();

$("#input-tags").focus(function(){
        searchTags($(this).val().replace(/(^\s*)|(\s*$)/g, ""));
    });
    $("#input-tags").blur(function(){
        $(".tags-autocomplete-select-menu").fadeOut();
    });
    $("#input-tags").bind('input propertychange',function(e){
        searchTags($(this).val().replace(/(^\s*)|(\s*$)/g, ""));
        var word = $(this).val();
        var pos = word.indexOf(",");
        if (pos > 0) {
            insertTags(word);
        }
    });

$(document).on("click",".tags-autocomplete-select-item",function() {
        insertTags($(this).attr("data-value"));
    });
    $(document).on("click",".icon-delete",function() {
        $(this).parent().remove();
        updateSubmitTags();
    });

});
```

	南柯	2023
	cxlove	1970
	vainner	1763
4	1000310428赵成帅	1718
5	XiaoWen	1710
6	1000380213洪伟焕	1701
7	weiben	1684
8	Jungle.Wei	1678
9	1100310131曾翔宇	1664
10	hongwh	1653