Mention.js 使用教程

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

梅研芊

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

阅读量297

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00780/article/details/141075990

版权

Mention.js 使用教程

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

项目介绍

Mention.js 是一个轻量级的JavaScript库，专为网页应用设计，旨在实现输入框内的自动提及(@提及)功能。灵感来自于社交媒体平台如Twitter和Facebook，它使得在文本输入过程中插入特定用户名或者标签变得简单直观。此项目基于jQuery，提供了实时建议和自定义回调机制，让开发者能够灵活地控制提及行为，增强用户交互体验。

项目快速启动

安装与引入

首先，确保你的项目环境中包含了jQuery。接着，通过CDN服务获取Mention.js：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mentionjs/0.1.6/mention.min.js"></script>

之后，在HTML中准备一个输入框用于启用提及功能：

<input type="text" id="mention-input" />

最后，初始化Mention.js：

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

这段脚本绑定了基础的提及功能，当用户在输入框中输入‘@’符号时，将会看到建议列表，并能从中选择提及的对象。