开源地址：https://github.com/yuezhongxin/Mention.js

插件效果：类似于微博或 github 中 @user 列表效果。

这是个二次开发的插件，花了几天时间，对 Mention.js（作者 jakiestfu） 进行了一些改进，主要是下面几个方面：

  • 增加 search 自定义：可以根据输入的 @user-key，进行后台动态查询。
  • 增加 textarea 跟踪焦点：效果是用户列表跟踪在 textarea 输入焦点，而不是在 textarea 底部，主要使用 textarea-caret-position.js 插件（用来获取 textarea 当前焦点坐标）。
  • 增加 under 选项：是否跟踪焦点，默认为 false。
  • 完善 matcher：主要是判断是否要 search，比如 textarea 输入内容，如何进行判断查询并显示结果列表。
  • 增加 simple：去除 bootstrap 的一些样式效果，简单化。
  • 增加 select 值后增加空格。
  • 增加 fixed 选项：是否固定列表，默认为 false。
  • 增加 sort 选项：是否进行排序，默认为 false。
  • 若干改进。

下面是四种配置和效果展示。

1. 默认效果

配置代码：

<body>

    <textarea id="full"></textarea>

    <link rel="stylesheet" type="text/css" href="../css/mention.css">

    <script src="../scripts/jquery-1.10.2.js"></script>

    <script type='text/javascript' src="../scripts/mention-typeahead.js"></script>

    <script type='text/javascript' src="../scripts/mention.js"></script>

    <script type='text/javascript' src="../scripts/textarea-caret-position.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#full").mention({

                typeaheadOpts: {

                    search: search

                }

            });

        });

        function search(key) {

            //在这里可以写后台查询代码

            var data = [{

                name: 'Rob Dyrdek',

                image: 'http://placekitten.com/25/24'

            }, {

                name: 'Rick Bahner',

                image: 'http://placekitten.com/25/23'

            }];

            console.log("key:" + key);

            return data;

        }

    </script>

</body>

2. 列表跟随焦点

配置代码：

<body>

    <textarea id="full"></textarea>

    <link rel="stylesheet" type="text/css" href="../css/mention.css">

    <script src="../scripts/jquery-1.10.2.js"></script>

    <script type='text/javascript' src="../scripts/mention-typeahead.js"></script>

    <script type='text/javascript' src="../scripts/mention.js"></script>

    <script type='text/javascript' src="../scripts/textarea-caret-position.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#full").mention({

                typeaheadOpts: {

                    search: search,

                    under: true

                }

            });

        });

        function search(key) {

            //在这里可以写后台查询代码

            var data = [{

                name: 'Rob Dyrdek',

                image: 'http://placekitten.com/25/24'

            }, {

                name: 'Rick Bahner',

                image: 'http://placekitten.com/25/23'

            }];

            console.log("key:" + key);

            return data;

        }

    </script>

</body>

3. 简化风格

配置代码：

<body>

    <textarea id="full"></textarea>

    <link rel="stylesheet" type="text/css" href="../css/mention-simple.css">

    <script src="../scripts/jquery-1.10.2.js"></script>

    <script type='text/javascript' src="../scripts/mention-typeahead.js"></script>

    <script type='text/javascript' src="../scripts/mention.js"></script>

    <script type='text/javascript' src="../scripts/textarea-caret-position.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#full").mention({

                typeaheadOpts: {

                    search: search,

                    under: true

                }

            });

        });

        function search(key) {

            //在这里可以写后台查询代码

            var data = [{

                name: 'Rob Dyrdek',

                image: 'http://placekitten.com/25/24'

            }, {

                name: 'Rick Bahner',

                image: 'http://placekitten.com/25/23'

            }];

            console.log("key:" + key);

            return data;

        }

    </script>

</body>

4. 固定列表

配置代码：

<body>

    <textarea id="full"></textarea>

    <link rel="stylesheet" type="text/css" href="../css/mention-simple.css">

    <script src="../scripts/jquery-1.10.2.js"></script>

    <script type='text/javascript' src="../scripts/mention-typeahead.js"></script>

    <script type='text/javascript' src="../scripts/mention.js"></script>

    <script type='text/javascript' src="../scripts/textarea-caret-position.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#full").mention({

                typeaheadOpts: {

                    search: search,

                    under: true,

                    fixed: true

                }

            });

        });

        function search(key) {

            //在这里可以写后台查询代码

            var data = [{

                name: 'Rob Dyrdek',

                image: 'http://placekitten.com/25/24'

            }, {

                name: 'Rick Bahner',

                image: 'http://placekitten.com/25/23'

            }];

            console.log("key:" + key);

            return data;

        }

    </script>

</body>

分享一个 @user 前端插件的更多相关文章

  1. 分享一个漂亮按钮插件FancyButtons

    一转眼,2018年的第10天就这样过去了.回看17年,曾经做了些啥都忘记了,就像每一天写日志时的样子(双手放在键盘上,怒着嘴,抬着头,望着天花板), 然后突然记得好像好久没有写随笔了(@_@).自从配 ...

  2. 给大家分享一个jQuery TAB插件演示

    jquery tab选项卡插件示例页面代码,使用jquery.tabs.js轻量级的tab选项卡插件来实现,并支持鼠标滑过.点击.自动切换.数据回调等功能,有的是点击切换,有的是鼠标滑过切换,自带了多 ...

  3. 分享一个Jquery 分页插件 Jquery Pagination

    分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...

  4. 前端插件@user

    分享一个 @user 前端插件   开源地址:https://github.com/yuezhongxin/Mention.js 插件效果:类似于微博或 github 中 @user 列表效果. 这是 ...

  5. 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行

    [微信支付]分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已 ...

  6. 一个Web前端工程师或程序员的发展方向，未来困境及穷途末路

    如果你刚好是一个Web前端工程师,或者你将要从事web前端工作.你应该和我有同样的感慨,web前端技术到了自己的天花板,前端工作我能做多少年?3年或5年?自己的职业规划应该怎么样?收入为什么没有增长? ...

  7. 分享一个与ABP配套使用的代码生成器源码

    点这里进入ABP系列文章总目录 分享一个与ABP配套使用的代码生成器源码 真对不起关注我博客的朋友, 因最近工作很忙, 很久没有更新博客了.以前答应把自用的代码生成器源码共享出来, 也一直没有时间整理 ...

  8. 福利到~分享一个基于jquery的智能提示控件intellSeach.js

    一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...

  9. 分享一个漂亮的ASP.NET MVC界面框架

    本文分享一个插件化的界面框架,该框架提供了用户.角色.权限管理功能,也提供了插件的管理和插件中心.下图是该界面框架的样式(全部源码和原理介绍下一篇分享,推荐越多,源码放的越早,呵呵). 要使用该界面框 ...

随机推荐

  1. *HDU 1392 计算几何

    Surround the Trees Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  2. angular----关于注入HTML

    后台接口返回了一个HTML字符串,要绑定到页面,第一时间想到了innerHTML... 一:先说下一般用法 //原生用法 <div id="content"></ ...

  3. SQL Server 高级sql总结

    ----------------------------------------------------------------------Select------------------------ ...

  4. jquery的each

    each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的循环功能,使用也很方便,它可以循环一维数组.多维数组.DOM, JSON 等等在javaScript开发过程中使用$ ...

  5. Hbuilder开发HTML5 APP之WebView

    WebView就是原生的WebView,HBuilder在其上封装了一层,便于Javascript的调用,结构如图: 也可以实现这样的结构: 注意:WebView的使用属性HTML5+规范,所以必须等 ...

  6. 并联机构逆运动学用MapleSim符号来解决

    在多体机械中,平台的运动学分析(运动学问题)可以分为两类:正向运动学问题和逆向运动学问题.所谓正向运动学是指研究机构中一点(例如,机械手臂上终端操作机构或由并联机械操纵器支持的平台的中心)在空间中的位 ...

  7. Concurrency并发性

    今天看了有关性能的文章,性能也是客户所看重的. 文章推荐看了软件编程并发性. 就按书上敲了网址看:http://www.gotw.ca/publications/concurrency-ddj.htm ...

  8. TCPView for Windows

    TCPView是一个用来显示系统中所有的TCP和UDP端点(endpoint)列表的Windows程序,包括本地和远程的网络地址,以及TCP连接的状态.在Windows Server 2008.Vis ...

  9. NodeJS入门（四）—— path对象

    很快Node就会迎来4.0的时代,届时将并入现有的iojs,所以先前写过的iojs入门系列直接更名为NodeJS入门. 本篇开始将逐个介绍Node的各主要模块,依循API文档走一遍,但会给出比API文 ...

  10. 我所理解的RESTful Web API [设计篇]

    <我所理解的RESTful Web API [Web标准篇]>Web服务已经成为了异质系统之间的互联与集成的主要手段,在过去一段不短的时间里,Web服务几乎清一水地采用SOAP来构建.构建 ...