Mr丶冷文

文章 分类 评论
117 10 6310

站点介绍

冷文学习者(KEVINLU98.COM),记录一个北漂小码农的日常业余生活
友链申请地址(直接评论即可): 传送门

(七)编辑文章的标签自动提示功能

MR丶冷文 2022-10-08 210 0条评论 个人博客项目视频教程 javaspringboot个人博客博客系统

首页 / 正文
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单

发布于2022-10-28

(七)编辑文章的标签自动提示功能

前言

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

标签数据

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

    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('')
        }
      }
    })

评论(0)

最新评论

  • 阿伟

    拿下

  • 阿伟

    我looklook

  • 阿伟

    拿下

  • 阿伟

    来了

  • 阿伟

    下载

日历

2023年02月

   1234
567891011
12131415161718
19202122232425
262728    

文章目录

站点公告
Freewind主题v1.5版本已发布,下载请移步Freewind 1.5,同时还有主题伴生插件Freewind Markdown,下载请移步 Freewind Markdown,有问题请在留言板,交换友链请直接在友链留言,我创建了一个主题交流群,有兴趣可以加下: 点此加入
报毒我说明一下,是因为我把主题的版权信息做了加密,其中用了eval,杀毒软件认为eval函数是一个危险的操作,这点介意的话请勿下载,我也没有强迫任何人去下载,也没有向大家收取一分钱的主题费用,所以也犯不着因为这些事情来喷我,喜欢就用,不喜欢就不用,就这么简单
点击小铃铛关闭