利用at.js实现微博@功能

最新推荐文章于 2024-08-13 08:10:16 发布
最新推荐文章于 2024-08-13 08:10:16 发布
阅读量1.4k 收藏 3
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33300026/article/details/103204310
版权

直接贴出前端代码和@的交互逻辑代码

at.js官网

将页面内需要引用的js和css文件从官网下载,然后引入,直接打开这个demo就可以了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="at/jquery.atwho.css" />
		<link rel="stylesheet" href=" https://apps.bdimg.com/libs/bootstrap/3.0.3/css/bootstrap.min.css" type="text/css"/>
		<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> 
		<script src="https://apps.bdimg.com/libs/bootstrap/3.0.3/js/bootstrap.min.js"></script>
		<script src="at/jquery.caret.js"></script>
		<script src="at/jquery.atwho.js"></script>
		<style>
			body{
				display: flex;
				flex-direction: row;
				justify-content: center;
			}
			 .at_container{
			    width: 120px;
			    border: 1px solid rgba(0,0,0,.15);
		   		border-radius: 4px;
			    position: absolute;
			    bottom:15px;
			    display:none;
			    z-index: 9999;
			    background-color: #fff;
			    height: auto;
		    }
		    ul{
		    	margin-bottom: 0px;
		    }
		   .at_container li{
		    	display: block;
				display: flex;
		    	flex-direction: column;
		    	justify-content: center;
				padding-left:10px;
		    	font-size: 14px;
		    	font-weight: 400;
			    white-space: nowrap;
			    cursor: pointer;
			    border-bottom: 1px solid #e5e5e5;
			    height: 35px;
		    }
		   .at_container li:HOVER{
		    	background-color: #3366FF;
		    	color: #fff;
		    }
		</style>
	</head>
	<body>
		<div style="position: relative;margin-top: 200px;">
			<div class='at_container' id="at_container">
				<ul id='list' style="overflow-y:auto; padding-left: 0px">
				</ul>
			</div>
			<div id="info" class='form-control'  style="width: 400px;height: 100px; overflow-y: auto;"  contenteditable="true" >
				
			</div>
		</div>

	</body>
		<script>
			//后端返回的整个@数组列表
			var AllList = [{"name":"熊大","id":"1"},
				{"name":"熊二","id":"2"},
				{"name":"熊三","id":"3"},
				{"name":"熊四","id":"4"},
				{"name":"熊五","id":"5"},
				{"name":"熊六","id":"6"},
				{"name":"熊七","id":"7"},
				{"name":"熊八","id":"8"},
				{"name":"熊九","id":"9"},
				{"name":"熊老幺","id":"10"}];
			//后端返回的最近@过的人员列表
			var freList = [{"name":"熊二","id":"1"},
			{"name":"熊三","id":"2"},
			{"name":"熊八","id":"3"}]
			//初始化查询模式,默认在输入时处于非查询的状态下
			var searchModel = false;
			//初始化查询字符串在消息窗的index
			var searchStartIndex = 0;
			$(function(){		
					$("#info").keyup(function (e) {
					//如果按下@则此时进入查询模式,给searchModel和searchStartIndex赋值
					if(e.shiftKey&&e.keyCode==50){
						searchModel = true;
						searchStartIndex = $('#info').text().length;
					}
					//删除内容均导致退出search模式
			        if (e.keyCode == 8 || e.keyCode == 46) {
			        	searchModel = false;
			        	//关闭@列表
			            $('#at_container').css('display', 'none');
			        	//判定删除后文本最末字符是否是@,如果是则进入search模式
			        	if($("#info").text().substring($("#info").text().length-1,$("#info").text().length)=='@'){
			        		searchModel = true;
			        		searchStartIndex = $('#info').text().length;
			        	}
			        }
			        //如果不在查询模式下,直接返回
			        if(!searchModel){
			        	return;
			        }
			        //截取待查询的字符串
			        var searchString = $("#info").text().substring(searchStartIndex,$("#info").text().length);
			        if(searchString==''&&freList.length>0){
			        	//如果查询的字符串为空,即刚摁下@符号时,此时默认显示最近@过的人员列表
			        	pushToHtml(freList,function(){
			        		$('#at_container').css('display', 'block');
			        	});
			        }else{
			        	//否则从整个人员列表查询结果,查询的算法使用简单的indexOf函数
			        	var rl = new Array();
			        	for(var i in AllList){
			        		if(rl.length>=5)break;
			        		if(AllList[i].name.indexOf(searchString)!=-1)
			        			rl.push(AllList[i]);
			        	}
			        	if(rl.length>=1){//显示
			            	pushToHtml(rl,function(){
			            		$('#at_container').css('display', 'block');
			            	});	
			        	}else{//隐藏
			        		$('#at_container').css('display', 'none');
			        	} 
			        }		
			        //显示@列表并设置偏移位置
			        var offset = $('#info').caret('offset');
			        var position = $('#info').caret('position');
			        console.log(position)
			        var editorWidth = $('#info').width();
			        var atWidth = $('#at_container').width();		        
			        // 当右侧的空间不够显示@弹窗时，显示在左侧
			        // 所以需要对右侧剩余空间的大小进行判断
			        if (editorWidth - position.left < atWidth) {
			            $('#at_container').css('left', position.left - atWidth - 15);
			        } else {
			            $('#at_container').css('left', position.left+10);
			        }
			        $('#at_container').css('bottom',$('#info').height() - position.top);
			        $('#at_container').scrollTop(0);		        
				});
				//
				
				$("#info").click(function(e){
					if(searchModel){
						var searchString = $("#info").text().substring(searchStartIndex,$("#info").text().length);
						 if(searchString==''&&freList.length>0){
					        	pushToHtml(freList,function(){
					        		$('#at_container').css('display', 'block');
					        	});
					      }else{
					        	var rl = new Array();
					        	for(var i in AllList){
					        		if(rl.length>=5)break;
					        		if(AllList[i].name.indexOf(searchString)!=-1)
					        			rl.push(AllList[i]);
					        	}
					        	if(rl.length>=1){
					            	pushToHtml(rl,function(){
					            		$('#at_container').css('display', 'block');
					            	});	
					        	}else{
					        		$('#at_container').css('display', 'none');
					        	} 
					     }	
				        //显示@列表并设置偏移位置
				        var offset = $('#info').caret('offset');
				        var position = $('#info').caret('position');
				        console.log(position)
				        var editorWidth = $('#info').width();
				        var atWidth = $('#at_container').width();		        
				        // 当右侧的空间不够显示@弹窗时，显示在左侧
				        // 所以需要对右侧剩余空间的大小进行判断
				        if (editorWidth - position.left < atWidth) {
				            $('#at_container').css('left', position.left - atWidth - 15);
				        } else {
				            $('#at_container').css('left', position.left+10);
				        }
				        $('#at_container').css('bottom',$('#info').height() - position.top);
				        $('#at_container').scrollTop(0);	
					}
				})
				
					
				// 点击@窗体外的区域时，关闭@弹窗
				$(document).mouseup(function(e) { 
				    var pop = $('#at_container');    
				    if(!pop.is(e.target) && pop.has(e.target).length === 0) { 
				        $('#at_container').css('display', 'none');
				    }  
				}); 
				
			})
			
			function pushToHtml(list,callback){
				var html = "";
				for(var i in list){
					html += "<li data-id='"+list[i].id+"'>"+list[i].name+"</li>";
				}
				$("#list").html(html);
				registerClickOnLi();
				return (callback && typeof(callback)==="function") && callback();
			}
			function registerClickOnLi(){
				$('#at_container ul li').unbind('click').click(function (e) {
				    e.stopPropagation();
				    var id = $(this).data('id');
				    var name = $(this).text();
				    $('#at_container').css('display', 'none');
				    var html = $("#info").html().substring(0,$("#info").html().lastIndexOf("@")+1);
				    html += '<span contenteditable="false"  data-id="'+id+'">'+name+'</span>&nbsp;';
				    $("#info").html(html);
				   	$('#info span[data-id="'+id+'"]').attr('contenteditable', false);
				   	keepLastIndex(document.getElementById("info"));
				});
			}
			function keepLastIndex(obj) {
			    if (window.getSelection) {//ie11 10 9 ff safari
			        obj.focus(); //解决ff不获取焦点无法定位问题
			        var range = window.getSelection();//创建range
			        range.selectAllChildren(obj);//range 选择obj下所有子内容
			        range.collapseToEnd();//光标移至最后
			    }
			    else if (document.selection) {//ie10 9 8 7 6 5
			        var range = document.selection.createRange();//创建选择对象
			        range.moveToElementText(obj);//range定位到obj
			        range.collapse(false);//光标移至最后
			        range.select();
			    }
			}
		</script>
</html>

 

浮华饰浮华
关注
专栏目录
仿新浪微博@功能 JS的实现 ——使用JQ At.js 和HTML5 contentEditable
李二狗的博客
05-25 7814
项目需求 增加@功能 先上效果图Atwho.js  gitHub地址   https://github.com/ichord/At.js需要引入的JS：  &lt;script type="text/javascript" src="jquery.caret.js"&gt;&lt;/script&gt;    // 这个JS插件用来获取光标位置  &lt;script type="text/jav...
Vue——@功能PC端实现总结
小王的技术库
06-18 2498
近期需要接到一个需求，需要在输入框中实现@通知用户的功能，这个功能现在也有很多应用都有，像我们常用的QQ空间，微博这些，开始看到这个需求，心里一阵惊恐，没做过啊~~我们大体的思路就是：当监听到用户输入@的时候我们弹出人员选择器，这时候我们需要记住现在光标所在的位置，当用户选择人员完毕之后，我们创建一个span标签在插入到我们刚刚记录光标的位置，并且把我们输入的@删除，将光标放在这个节点的最后。按住shift + @ 的时候，弹出人员选择器人员选择器要跟随光标的位置出现选择时 @的用户标签插入当前的光标位置中
微博@功能实现
weixin_33762321的博客
02-23 579
2019独角兽企业重金招聘Python工程师标准>>> ...
At.js 开源项目使用教程
最新发布
gitblog_01092的博客
08-13 303
At.js 开源项目使用教程 At.jsAdd Github like mentions autocomplete to your application.项目地址:https://gitcode.com/gh_mirrors/at/At.js 1. 项目的目录结构及介绍 At.js 项目的目录结构如下： At.js/ ├── dist/ │ ├── at.js │ └── at.min...
At.js的使用
bajiudongfeng的专栏
08-26 1871
At.js实现在文本框中的搜索功能 使用jian
微博@用户功能的简要实现
我是程序猿，我为自己袋盐
08-26 1187
static Pattern referer_pattern = Pattern.compile("@([^@^\\s^:]{1,})([\\s\\:\\,\\;]{0,1})");//@.+?[\\s:] public static String usname(String msg){ String usname = ""; int lastIdx =
At.js – 用于 Web 应用程序的自动完成库
weixin_33854644的博客
05-01 178
　　At.js 是一个自动完成库，用来实现自动完成提示，表情等，就像你在 Github 或 Twitter 上看到的一样。它支持 HTML5 contentEditable 元素。你可以听任何字符，而不仅仅是 '@' 符号，可为不同的字符设置多个监听器以实现不同的行为和数据。 　　监听器事件可以绑定到多个 Inputors（输入器） 。除了鼠标之外还支持键盘控制。您可以用一组可配置的回调来使用自...
jQuery使用At.js插件实现模仿新浪微博@功能特效源码.zip
11-19
在本项目中，我们主要探讨如何使用jQuery与At.js插件来实现类似新浪微博中的“@”功能，这是一种常见的社交网络交互方式，允许用户在文本中提及其他用户，从而触发通知。接下来，我们将深入讨论jQuery的基本概念，At...
jQuery仿新浪微博@功能特效.zip
07-04
本项目“jQuery仿新浪微博@功能特效”利用jQuery实现了一个类似新浪微博的@提及功能，这种功能在社交网络和评论系统中十分常见，用于用户之间进行互动。下面将详细介绍这个功能的实现原理和涉及的技术点。 首先，`...
微博态势感知系统开发——django实现
weixin_43906500的博客
06-30 1546
本文详细介绍并实践了微博态势感知系统开发的过程，其基于django实现。 系统框架如下所示： 本文主要使用以下技术： 1.web前端开发知识——html、css、javascript 2.web前端框架开发——bootstrap、jquery 3.异步传输技术——ajax 4.基于python的web开发——django 5.数据库操作——基于ORM操作mysql 6.可视化展示技术——pyecharts开发 1.系统设计 1.1需求分析 本系统设计主要用来实现微博用户信息的自动化
js仿微博功能，很好的效果
07-21
效果很不错，仿微博效果！！！！！！！！！！！！！！
vue-at：Vue的At.js
02-06
视点 实时演示和文档： : Docs由。 Chrome / Firefox / Edge / IE9〜IE11 基于纯文本，没有jQuery，没有额外的节点 内容可编辑/文本区域 头像，自定义模板 Vue2 / Vue1 Vuetify / Element-UI Vue-CLI 3迁移 另请参阅： 动机 很棒，但是： 它基于jQuery和jQuery-Caret。 它引入了额外的节点包装器。 在内容编辑/复制/粘贴时可能不稳定。 最后，我最终创建了这个。 npm i vue-at@2.x # for Vue2 <---- npm i vue-at@1.x
实现类似于新浪微博@的功能
流年逝2011
06-28 1973
这个类的功能实现类似于新浪微博的@功能 public String regularExpression(String content) {         Pattern pattern = Pattern.compile("@[^@\\s]*(?=[\\s:：，,.。])");//判断@的正则表达式         Matcher matcher = pattern.matcher(c
js实现群聊@功能
大风起兮云飞扬
06-14 2614
js@功能实现 在聊天过程中，我们不免会使用到@功能来针对某个人来发消息。但是要明确一点的是，@功能是属于群组聊天的。所以说1对1的私聊是没有@功能的，所以第一点我们要判断是不是群组聊天，还得判断@符号的输入。我们先来看下面一个例子： 如下，是react-native的代码，input框的value是变量input，而input框实时的输入值是text，我们输出看了一下，如图2。我们不难发现text的值永远比input的值的长度大1。所以我们可以通过这个来判断是否是最后的输入。 图：1 图：2 接下来我
JS实现@功能
lyj168997的博客
01-03 2583
参考文章网址 1.https://segmentfault.com/a/1190000007846897?utm_source=tag-newest 2.https://www.jianshu.com/p/fff5079b1268 下边是简单的demo代码，可以复制自己在本地执行 初始版本 <!DOCTYPE html> <html> <head> ...
js @功能实现
Stavin Li的博客
11-20 3693
PC端 html <link rel="stylesheet" href="/atwho/jquery.atwho.css" /> <script type="text/javascript" src="/atwho/jquery.caret.js"></script> <script type="text/javascript" src="/atw...
at.js使用
07-25 242
‘ <script src="__PUBLIC__/client/code/jquery.atwho.js" type="text/javascript"> <link href="__CSS__/jquery.atwho.css" type="text/css" rel="stylesheet" /> <script type="text/javascript"> $(function(){
原生js实现简单微博发布功能Dom（节点操作）
敲代码不爱找bug的妹子
08-25 3383
现在很多人都在用微博，微博成为一种很普遍的分享，交流平台，以至于养成了每天睁开眼睛第一件事情和每天晚上闭上眼睛之前最后一件事就是要刷微博。博主一般就是潜水，默默的刷别人的微博，以至于到现在我的粉丝依旧是9个，特别稳定~~搞得本宝宝很焦灼...（有想要关注我的，可以私信哦~嘻嘻） 好啦，废话不多说，进入正题。。 （只是实现简单的节点操作，做的不好勿喷~~~）这个简单的功能主要分为三大部分：
微博@功能实现：JavaScript代码示例
"该资源提供的是一个用于解析和实现微博@功能的JavaScript类库，名为`demonAt`。这个类允许开发者自定义配置，并且可以直接应用于项目中，以实现用户在文本输入框中进行@操作时的动态搜索和高亮显示等功能。" 在...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值