javascript - 标签技术,是怎么实现的?

 mobiledu2502871343 发布于 2022-11-16 06:23

后台是用ThinkPHP框架的,前台页面呈现的Tag标签技术,怎么实现呢?
就比如segmentFault的这种标签技术?
在“问题”这张表格里有一个叫做tag的字段?
怎么实现像segmentFault的这种标签效果呢?

更具体的问题在这里:
https://segmentfault.com/q/1010000004909...

5 个回答
  • 实现这样的效果从代码层方面,有两种方法:
    首先来说第一种,一开始就把所有的父类ID和子类ID标签数据都读取出来显示在页面上(利用CSS显示、隐藏),然后jquery事件,click或者focus来切换选中的父类标签,来展示父类标签对应的子类标签;这种方法显示效果最快,但是一开始就读取了数据,数据量大的时候对加载会有那么一点点影响,但问题应该不是很大;

    第二种就是,利用ajax的原理实现,实现局部刷新,同样的需要用到jquery事件,click或focus,选中时候获得父类标签ID,拿到ID用ajax传递到后台,从数据库读取数据返回前台,刷新子标签;这种即时显示数据的效果获取可能会差点,但避免了方法一的一开始就加载大量数据拖慢效率的缺点;

    还有一种,利用缓存

    2022-11-16 06:45 回答
  • 最后提交的时候,应该怎么取得已选择的标签的内容呢?
    我的意思是说,最后,已经选择的标签的内容,应该要记录进数据库吧,怎么取出,已经选择的标签的列表呢?

    嗯,主要的问题是,怎么从隐藏域里移除已经添加的tag

    2022-11-16 06:45 回答
  • 楼上所述方法是利用传统SQL来实现,我说一个利用NoSQL来实现的。

    题主可以看一下这本书:

    Redis入门指南

    其中有一章讲到了 利用Redis 来实现你描述的需求。

    2022-11-16 06:45 回答
  • 问题表 标签表 问题标签关联表
    标签应该还有一级二级之分吧 也就是每个标签需要记录它的父级标签

    2022-11-16 06:45 回答
  • 使用select2、tag-it等等,我使用的是tag-it。
    整个的流程大致是:在输入框输入字符的时候,会把当前的value值与数据库中的数据对比(ajax请求,data参数就是当前的value值),看看是否有备选项,如下面这样:

    有的话,后台就返回相应的value和id,直接选中添加即可;
    没有的话就是新创建标签:

    sf的逻辑是这样的:当你创建新标签的时候,后台直接创建,然后返回相应的id值。它是把创建标签作为了一个单独的过程,和当前提问或发表文章并不是“100%挂钩”,即当你创建一个新标签之后,你又取消了相关的提问,这时虽然你没有提问,但是你创建的标签已经在数据库中存在了,下次搜索标签时这个标签已经作为备选项存在了。关于是在创建新标签的时候就写入到数据库中还是在最后一步点击“提交”时再写入数据库,Tag-it插件的使用:如何传递额外数据给服务器?,我在这个问题的答案最后简单讨论了一下,有兴趣的可以看一下。

    最后提交时,获取每个标签的id值,与问题的id值再关联起来,就知道每个问题对应哪些标签了。

    2022-11-16 06:45 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有