Mention.js 使用教程

最新推荐文章于 2024-09-28 07:51:51 发布

平依佩Ula

最新推荐文章于 2024-09-28 07:51:51 发布

阅读量230

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00012/article/details/138788160

版权

Mention.js 使用教程

Mention.js Lightweight wrapper for adding @user mention functionality to Twitter Bootstraps Typeahead plugin 项目地址: https://gitcode.com/gh_mirrors/me/Mention.js

1. 项目介绍

Mention.js 是一个轻量级的 JavaScript 库，旨在为 Twitter Bootstrap 的 Typeahead 插件添加 @user 提及功能。通过 Mention.js，您可以轻松地在文本输入框中实现类似于 Twitter 的 @ 提及功能。该库具有以下特点：

轻量级：文件大小仅为 1.92KB（压缩后），对页面性能影响小。
易用性：只需简单的配置选项，即可快速实现自动提及功能。
高度可扩展：允许开发者通过自定义回调函数实现更丰富的功能，如异步数据加载、过滤和排序等。
跨浏览器兼容：支持主流的现代浏览器，包括 Chrome、Firefox、Safari 和 Edge 等。
响应式设计：在不同屏幕尺寸的设备上都能获得良好的用户体验。

2. 项目快速启动

2.1 安装

首先，您需要将 Mention.js 库添加到您的 HTML 页面中。您可以通过以下方式引入库：

<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mentionjs@0.1.6/dist/mention.min.js"></script>

2.2 初始化

在页面加载完成后，使用 jQuery 初始化 Mention.js 插件：

$(document).ready(function() {
    $('#inputBox').mention({
        data: ['Alice', 'Bob', 'Charlie'],
        delimiter: '@',
        maxItems: 10,
        onSelect: function(item) {
            console.log('Selected:', item);
        }
    });
});

在这个示例中，#inputBox 是包含自动提及功能的文本输入框。