效果

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代码

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>

显示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代码

$(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);
            }
        });
    }
    function updateSubmitTags() {
        var tagsList = "";
        $("a.label-item").each(function(){
            if (tagsList.length == 0) {
                tagsList = $(this).text();
            } else {
                tagsList += "," + $(this).text();
            }
        });
        $('#submit-tags').val(tagsList);
    }
    function insertTags(insertTag) {
        var tags = insertTag.split(",");
        insertShowTags(tags);
        /* 清空输入框内容 */
        $("#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();
    });
});