（七）编辑文章的标签自动提示功能

前言

我们上节课完成了文章编辑页面的搭建，但标签部分我们还没有做，我们可以看到演示项目中标签这里是有个输入提示，而且我们也能从已选择的标签中取它取消选择，这节课我们就来完成这部分功能的开发

标签数据

• 插入一些标签的测试数据

  insert into blog_tag (name)
  values ('emlog相关'),
         ('typecho相关'),
         ('网站相关'),
         ('Linux学习'),
         ('Mac相关'),
         ('freedom'),
         ('emlog'),
         ('主题'),
         ('腾讯cos'),
         ('cos'),
         ('图床'),
         ('冷文图床'),
         ('私人图床'),
         ('markdown'),
         ('插件'),
         ('欢迎页'),
         ('gitee'),
         ('登录注册'),
         ('其它'),
         ('教程下载'),
         ('itjc8'),
         ('linux'),
         ('虚拟机'),
         ('静态IP'),
         ('独立下载'),
         ('typecho'),
         ('自由之风'),
         ('评论通知'),
         ('点赞'),
         ('非插件')

思路及实现

• 准备两个字典，一个存放已选中的标签，一个存放未选中的标签

  // 选中标签
  let selectTags = {}
  //未选中标签
  let unSelectTags = {}
  
  $.ajax({
    url: '/admin/tag/',
    dataType: 'json',
    success: res => {
      res.data.forEach(x => unSelectTags[x.name] = x)
    }
  })

• 准备一个两个ul，一个存在选中标签列表，一个存放提示的标签列表

• 存放提示的标签列表给一个绝对定位让其在标签输入框的下方

  • CSS

    <style>
      #lw-select-tags {
        border: 1px solid #cccccc;
        padding: 0;
        border-radius: 2px;
        list-style: none;
      }
    
      #lw-select-tags li {
        background-color: #ffffff;
        padding: 6px 10px;
        margin-bottom: 2px;
        position: relative;
      }
    
      #lw-select-tags li a {
        position: absolute;
        right: 10px;
        text-decoration: none;
      }
    
      #lw-unselect-tags {
        list-style: none;
        padding: 0;
        background-color: #fff;
        border: 1px solid #cccccc;
        position: absolute;
        width: 100%;
        z-index: 9;
      }
    
      #lw-unselect-tags li {
        border-bottom: 1px solid #cccccc;
        padding: 10px;
      }
    
      #lw-unselect-tags li:hover {
        background-color: #5bc0de;
        cursor: pointer;
      }
    
      #lw-unselect-tags li:last-child {
        border-bottom: none;
      }
    </style>

  • Html

    <div class="form-group" style="margin: 10px 0 0;position:relative;">
      <label>标签</label>
      <ul id="lw-select-tags">
        <li>测试标签 <a href="javascript:void(0)">x</a></li>
        <li>测试标签 <a href="javascript:void(0)">x</a></li>
      </ul>
      <input type="text" class="form-control">
      <ul id="lw-unselect-tags">
        <li>测试标签</li>
        <li>测试标签</li>
      </ul>
    </div>

• 监听键盘的输入事件，在输入时搜索未选中的标签列表，将匹配到的标签显示在ul里

  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;
  }
  
  $('#lw-tag-input').on('input', function () {
    let ust = $('#lw-unselect-tags')
    ust.html('')
    unSelectTags.search($(this).val()).forEach(x => ust.append(`<li>${x.name}</li>`))
  })

• 给body一个点击事件，点击body时清空搜索列表的内容

  $('body').on('click',function () {
    $('#lw-unselect-tags').html('')
  })

• 给提示标签列表里的标签加上点击事件，点击里将标签的保存到已选中的标签列表中，同时给将其加入选中列表的ul里

  $('#lw-unselect-tags').on('click', 'li', function () {
    let key = $(this).text()
      selectTags[key] = unSelectTags[key]
      delete unSelectTags[key]
      $('#lw-select-tags').append(`<li>${key} <a href="javascript:void(0)">x</a></li>`)
  })

• 给选中列表的ul中的li下a一个点击事件，点击时删除该元素且从选中标签列表中删除标签，同时在未选中标签列表中加入标签

  $('#lw-select-tags').on('click', 'a', function () {
    let tagLi = $(this).parent()
    let key = tagLi.data('value')
    if (selectTags[key].id) {
      unSelectTags[key] = selectTags[key]
      delete selectTags[key]
    }
    tagLi.remove()
  })

• 给表单一个监听回车的事件，我们按下回车后直接返回false，阻止表单提交

  $('#data-form').on('keydown', function (e) {
    if (e.keyCode===13){
      return false;
    }
  })

• 给标签输入框一个监听回车的事件，我们按下回车后直接把输入框的内容加到已选中的标签列表中，同时给将其加入选中列表的ul里

  $('#lw-tag-input').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);
          $('#lw-select-tags').append(`<li data-value="${key}">${key} <a href="javascript:void(0)">x</a></li>`)
        }
        $(this).val("")
        $('#lw-unselect-tags').html('')
      }
    }
  })