首頁 >後端開發 >php教程 >javascript - 标签技术,是怎么实现的?

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

WBOY
WBOY原創
2016-06-06 20:12:211011瀏覽

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

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

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

回复内容:

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

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

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

使用select2、tag-it等等,我使用的是tag-it。
整个的流程大致是:在输入框输入字符的时候,会把当前的value值与数据库中的数据对比(ajax请求,data参数就是当前的value值),看看是否有备选项,如下面这样:
javascript - 标签技术,是怎么实现的?
有的话,后台就返回相应的value和id,直接选中添加即可;
没有的话就是新创建标签:
javascript - 标签技术,是怎么实现的?
sf的逻辑是这样的:当你创建新标签的时候,后台直接创建,然后返回相应的id值。它是把创建标签作为了一个单独的过程,和当前提问或发表文章并不是“100%挂钩”,即当你创建一个新标签之后,你又取消了相关的提问,这时虽然你没有提问,但是你创建的标签已经在数据库中存在了,下次搜索标签时这个标签已经作为备选项存在了。关于是在创建新标签的时候就写入到数据库中还是在最后一步点击“提交”时再写入数据库,Tag-it插件的使用:如何传递额外数据给服务器?,我在这个问题的答案最后简单讨论了一下,有兴趣的可以看一下。

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

问题表 标签表 问题标签关联表
标签应该还有一级二级之分吧 也就是每个标签需要记录它的父级标签

楼上所述方法是利用传统SQL来实现,我说一个利用NoSQL来实现的。

题主可以看一下这本书:

Redis入门指南

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

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

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

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

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

还有一种,利用缓存

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn