分享一个 @user 前端插件

时间 2019-11-30

标签分享一个 user 前端插件繁體版

原文原文链接

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

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

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

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

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

1. 默认效果

配置代码：jquery

<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. 列表跟随焦点

配置代码：git

<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. 简化风格

配置代码：github

<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. 固定列表

配置代码：bootstrap

<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>

做者：田园里的蟋蟀
出处： http://www.cnblogs.com/xishuai/ 原文连接：http://www.cnblogs.com/xishuai/p/jquery-mention-user-plugin.html