diff --git a/src/main/resources/templates/admin/write.html b/src/main/resources/templates/admin/write.html
index 05b3621..01acfcf 100644
--- a/src/main/resources/templates/admin/write.html
+++ b/src/main/resources/templates/admin/write.html
@@ -1,13 +1,58 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org" lang="en">
-<head th:replace="admin/common::header(~{::title},~{},~{})">
+<head th:replace="admin/common::header(~{::title},~{},~{::style})">
     <title>新增文章</title>
+    <style>
+        #selected-tags {
+            border: 1px solid #cccccc;
+            padding: 0;
+            border-radius: 2px;
+            list-style: none;
+        }
+
+        #selected-tags li {
+            background-color: #ffffff;
+            padding: 6px 10px;
+            margin-bottom: 2px;
+            position: relative;
+        }
+
+        #selected-tags li a {
+            position: absolute;
+            right: 10px;
+            text-decoration: none;
+        }
+
+        #unselected-tags {
+            list-style: none;
+            padding: 0;
+            background-color: #fff;
+            border: 1px solid #cccccc;
+            position: absolute;
+            width: 100%;
+            z-index: 9;
+        }
+
+        #unselected-tags li {
+            border-bottom: 1px solid #cccccc;
+            padding: 10px;
+        }
+
+        #unselected-tags li:hover {
+            background-color: #5bc0de;
+            cursor: pointer;
+        }
+
+        #unselected-tags li:last-child {
+            border-bottom: none;
+        }
+    </style>
 </head>
 <body>
 <th:block th:include="admin/common::nav('article')"></th:block>
 <div class="container lw-main">
     <div class="row">
-        <form class="form-horizontal">
+        <form id="form-data" class="form-horizontal">
             <div class="col-md-9">
                 <h3 style="padding-left: 10px">创建新的文章</h3>
                 <hr/>
@@ -55,9 +100,13 @@
                         <!--            </div>-->
                     </div>
                 </div>
-                <div class="form-group" style="margin: 10px 0 0;">
+                <div class="form-group" style="margin: 10px 0 0;position:relative;">
                     <label>标签</label>
-                    <input type="text" class="form-control">
+                    <ul id="selected-tags">
+                    </ul>
+                    <input type="text" id="tag-input" class="form-control">
+                    <ul id="unselected-tags">
+                    </ul>
                 </div>
                 <div class="form-group" style="margin: 10px 0 0;">
                     <label>其它设置</label>
@@ -92,5 +141,95 @@
     </div>
 </div>
 <th:block th:include="admin/common::footer"></th:block>
+<script>
+    $(function () {
+        // 被选中的标签
+        let selectTags = {};
+        // 未选中的标签
+        let unSelectTags = {};
+
+        // 实现搜索功能
+        unSelectTags.search = function (keyword) {
+            let result = [];
+            Object.keys(unSelectTags).forEach(x => {
+                if (x.indexOf(keyword) > -1 && typeof unSelectTags[x] !== 'function') {
+                        result.push(unSelectTags[x]);
+                }
+            })
+            return result;
+        }
+
+        // 返回所有标签
+        $.ajax({
+            url: '/admin/tag/',
+            method: 'GET',
+            dataType: 'json',
+            success(res) {
+                res.data.forEach(x => unSelectTags[x.name] = x);
+                console.log(unSelectTags);
+            }
+        })
+
+        // 监听键盘的输入事件,在输入时搜索未选中的标签列表,将匹配到的标签显示在ul里
+        $('#tag-input').on('input', function () {
+            let ust = $('#unselected-tags');
+            ust.html('');
+            // 进入input是否有输入,有则使用搜索方法
+            unSelectTags.search($(this).val()).forEach(x => ust.append(`<li>${x.name}</li>`));
+        }).on('keydown', function (e) {
+            if (e.keyCode === 13) {
+                let key = $(this).val()
+                if (key) {
+                    if (!selectTags[key]) { // 不可以重复输入同一个标签
+                        if (unSelectTags[key]) {
+                            selectTags[key] = unSelectTags[key]
+                            delete unSelectTags[key]
+                        } else { // 如果该标签从未出现过
+                            selectTags[key] = {name: key}
+                        }
+                        console.log(key);
+                        $('#selected-tags').append(`<li data-value="${key}">${key} <a href="javascript:void(0)">x</a></li>`)
+                    }
+                    $(this).val("")
+                    $('#unselected-tags').html('')
+                }
+            }
+        })
+
+        $('body').on('click', function () {
+            // 给body一个点击事件,点击body时清空搜索列表的内容
+            $('#unselected-tags').html('')
+        });
+
+        // 从未选中的标签中选择标签
+        $("#unselected-tags").on('click',"li", function () {
+            let key = $(this).text();
+            selectTags[key] = unSelectTags[key];
+            delete unSelectTags[key];
+            $("#selected-tags").append(`<li data-value="${key}">${key} <a href="javascript:void(0)">x</a></li>`)
+            $('#tag-input').val(''); // 添加一个标签就将输入框清空
+        });
+
+        // 删除已选择的标签
+        $("#selected-tags").on('click',"a", function () {
+            let tagLi = $(this).parent();
+            let key = tagLi.data('value');
+            unSelectTags[key] = selectTags[key];
+            delete selectTags[key];
+            tagLi.remove();
+        })
+        // 给表单一个监听回车的事件,我们按下回车后直接返回false,阻止表单提交
+        $("#form-data").on('keydown', function (e) {
+            if (e.keyCode === 13) {
+                return false;
+            }
+        });
+    })
+
+
+
+
+</script>
+
 </body>
 </html>
\ No newline at end of file
