题库
比赛
近期比赛
排名
话题
编译器
登录
话题
写新话题
【OJ源码】css + javascript 实现tag标签的显示,插入和自动联想
HappyOJ
发布于
1 年前
20742
0
0
autocomplete
OJ源码
css
javascript
### 效果 ![1683002216437.png](/upload/image/20230502/20230502123656_9F009692FECA934D599AE3681C965250.png) ![1683001839854.png](/upload/image/20230502/20230502123039_AA522F04756591C24449EBF76BA35F68.png) ### CSS ```css .tags ul{margin-bottom:1em;list-style-type:none;} .tags ul li{list-style-type:none;} .tags {display: block; padding: 1px 3px;} .tags-sidebar{margin: 3px; line-height:28px;} .tags a{ -webkit-border-radius: 4px; -moz-border-radius: 4px; border: 1px solid #DDD; background: #E6E6E6; padding: 2px 3px 2px 3px; margin-right: 3px; color: #454545!important;; text-decoration: none; white-space: nowrap; line-height: 24px; font-size: 13px; } .tags .tag-name{ color: #454545; } .tags .tag-count{ opacity: .85; position: relative; display: inline-block; min-width: 16px; padding: 3px 2px; margin: 0px auto; font-size: 12px; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: middle; background-color: #777; border-radius: 50%; } .tags a:hover { color: #454545; font-size: 13px; background-color: #DDD; text-shadow: 0px 0px 1px #000000; -moz-transition: all 0.2s linear 0s; -webkit-transition: all 0.2s linear 0s; } .input-tags { border-bottom-style:none; background: none transparent !important; border: none !important; box-shadow: none !important; outline: none; z-index: 2; cursor: text; padding: 0; margin: 6px 0px 0px 6px; } .tags-autocomplete-select { z-index: 10; border: 1px solid #dfe3e9; border-radius: 3px; display: block; width: 100%; vertical-align: middle; padding: 3px; } .tags-autocomplete-select .icon { float: right; display: inline-block; width: 0; height: 0; margin: 12px 6px 0 6px; vertical-align: middle; border-top: 4px dashed; border-top: 4px solid\9; border-right: 4px solid transparent; border-left: 4px solid transparent; } .tags-autocomplete-select .label-item{ display: inline-block !important; white-space: normal; vertical-align: top; padding: 6px 8px; margin-right: 3px; box-shadow: 0px 0px 0px 1px rgb(34 36 38 / 15%) inset; background-color: #EFEFEF; border: 0px solid transparent; border-radius: 0.28571429rem; color: #6a6a6a; cursor: pointer; text-decoration: none; line-height: 1; } .tags-autocomplete-select-menu{ display: none; box-shadow: 0px 2px 3px 0px rgb(34 36 38 / 15%); border-radius: 0 0 3px 3px; cursor: auto; overflow-x: hidden; overflow-y: auto; border-top-width: 0px !important; outline: none; margin: 0px -1px; min-width: calc(100% + 2px ); width: calc(100% + 2px ); max-height: 200px; transition: opacity 0.1s ease; left: 0px; top: 0px; padding: 0px 0px; background: #FFFFFF; font-size: 1em; text-shadow: none; text-align: left; border: 1px solid rgba(34,36,38,0.15); z-index: 11; } .tags-autocomplete-select-item{ line-height: 1.333; border-top: 1px solid rgb(250, 250, 250); position: relative; cursor: pointer; display: block; text-align: left; line-height: 1em; padding: 6px; -webkit-box-shadow: none; box-shadow: none; -webkit-touch-callout: none; } .tags-autocomplete-select-item:hover { background: #f7f8f9; } i.icon-delete { font-family: 'Icons'; font-style: normal; cursor: pointer; margin-right: 0em; margin-left: 0.5em; font-size: 0.92857143em; opacity: 0.5; -webkit-transition: background 0.1s ease; transition: background 0.1s ease; } i.icon-delete:before { content: "X"; } ``` ### html代码 ```html input框框输入tag,自动遇到逗号插入完整tag,同时支持自动联想tag并选择。
``` ```html 显示tag
``` ### JS代码 ```javascript $(document).ready(function(){ var cache = {}; function showSelectTags(tags) { $(".tags-autocomplete-select-menu").html(""); $(".tags-autocomplete-select-menu").fadeIn(); var opt = ""; $.each(tags, function(i, event) { /* 过滤已经插入的tag */ var tagList = $('#submit-tags').val().split(","); if (tagList.indexOf(tags[i]) == -1) { opt += "
" + tags[i] +"
"; } }); $(".tags-autocomplete-select-menu").html(opt); } function searchTags(word) { if ( word in cache ) { showSelectTags(cache[ word ]); } else { /* api url可以替换为自己的地址,用户查询tag */ $.getJSON("/api/tags/search",{q: word},function(json) { if (json.success != true) { cache[ word ] = json.data; showSelectTags(json.data); } }); } } function insertShowTags(tags) { $.each(tags, function(i, event) { if (tags[i].length != 0) { var opt = "
" + tags[i] + "
"; $("#input-tags").before(opt); } }); } function updateSubmitTags() { var tagsList = ""; $("a.label-item").each(function(){ if (tagsList.length == 0) { tagsList = $(this).text(); } else { tagsList += "," + $(this).text(); } }); $('#submit-tags').val(tagsList); } function insertTags(insertTag) { var tags = insertTag.split(","); insertShowTags(tags); /* 清空输入框内容 */ $("#input-tags").val(""); /* 插入tag到隐藏的input框 */ updateSubmitTags(); } function initShowTags() { var tags = $('#submit-tags').val().split(","); insertShowTags(tags); } initShowTags(); $("#input-tags").focus(function(){ searchTags($(this).val().replace(/(^\s*)|(\s*$)/g, "")); }); $("#input-tags").blur(function(){ $(".tags-autocomplete-select-menu").fadeOut(); }); $("#input-tags").bind('input propertychange',function(e){ searchTags($(this).val().replace(/(^\s*)|(\s*$)/g, "")); var word = $(this).val(); var pos = word.indexOf(","); if (pos > 0) { insertTags(word); } }); $(document).on("click",".tags-autocomplete-select-item",function() { insertTags($(this).attr("data-value")); }); $(document).on("click",".icon-delete",function() { $(this).parent().remove(); updateSubmitTags(); }); }); ```
回复话题
Twitter
Hot Tags
dfs
22
implementation
19
dp
15
蓝桥
14
string
11
math
11
big number
10
number theory
9
combinatorics
9
happyoj
5
springboot
4
brute force
4
javascript
3
bfs
3
greedy
3
如梦令
3
divide and conquer
2
linux
2
Copilot
2
graph
2
probabilities
2
sortings
2
data structures
2
xor
2
python
1
telnetlib
1
cron
1
题解
1
docker
1
https
1
→
Top10
南柯
2023
cxlove
1970
vainner
1763
4
1000310428赵成帅
1718
5
XiaoWen
1710
6
1000380213洪伟焕
1701
7
weiben
1684
8
Jungle.Wei
1678
9
1100310131曾翔宇
1664
10
hongwh
1653
→
Topics
vbox Ubuntu无界面动态扩展磁盘空间
###问题:磁盘创建时时动态扩展方式,现在空间已经不足,却没有自动扩展生效磁盘空间
Problem A + B
略微有单简单
python 使用telnetlib登陆telnet服务器
```python
你好,请问如何在Windows下架设WEB?
大大你好,我是一个小白。
Python + openCV去除图片中红色字体
Github Copilot在代码检视内存泄漏上的能力
## 我给了一个带出参的由内存申请的函数,它能够识别函数内没有泄漏,但是需要提醒我调用者有没有释放内存,还是不错。
使用Github Copilot辅助开发的一些感受
## 我先选择了一段比较简单的代码,发现它给出的解释实际上就是代码本身自注释到的
Ubuntu 如何安装HappyOJ
## Table of contents
@Scheduled注解实现启动时延时60秒执行一次定时任务,后续按照cron定义的计划执行
最近遇到一个问题,通过springboot Scheduled定时调度,在启动时就会执行定时任务,导致启动性能较差。
【JS】JS设置粘贴板内容的方法
方法1:
→