添加标签 功能的前端实现

<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"