提到 MDB Pro component

提及-Bootstrap 5和Material Design 2.0插件

提及是用于搜索输入的自动完成下拉菜单

注意：阅读 API 标签以找到所有可用选项，然后 高级定制

基本例子

键入@，然后使用向上/向下箭头，主页/结束键进行导航。单击输入或使用鼠标单击以 选择项目

来自HTML的数据

无需进行JavaScript初始化即可访问提及组件。

Items数据必须作为HTML列表元素传递，并带有 指向输入/文本区域元素的 ID 的 data-mdb-target 属性。 列表项应具有正确的 data-mdb-属性。

触发时切换显示列表

默认情况下，显示触发键上的所有项目都是打开的。组 false 的 showListOnTrigger 选项将其关闭并仅显示项目 用户搜索输入后

展示位置示例

使用 placement 选项更改组件的位置

如果没有可用空间，则组件的位置将翻转到相反的一侧。 一旦检测到足够的空间，组件将翻转回其原始位置

Textarea示例

提及也适用于 textarea

自定义无结果文本

将 noResultsText 设置为您选择的文本，以更改无结果的消息 发现

触发标志

使用 trigger 选项更改搜索触发符号

显示图片

使用 showImg 选项在提及列表中显示图片

可见物品

使用 visibleItems 选项更改将在其中显示的选项数量 选择下拉列表而不滚动。

多个清单

通过为每个提及赋予不同的触发键，为元素分配多个提及

异步数据

使用 getAsync 选项使用异步数据加载

提到 - API

用法

ゔIA HTML


        <div class="form-outline">
          <input
            type="text"
            id="html-data"
            class="form-control mention"
          />
          <label class="form-label" for="html-data">Data from HTML list</label>
        </div>
        <ul class="mention-data-mdb-items" data-mdb-target="html-data">
          <li data-name="James" data-mdb-username="james123" data-mdb-img="..."></li>
          <li data-name="John" data-mdb-username="john322" data-mdb-img="..."></li>
          <li data-name="Mary" data-mdb-username="maryx" data-mdb-img="..."></li>
        </ul>

Via JavaScript


        <div class="form-outline">
          <input type="text" id="basic-example" class="form-control mention" />
          <label class="form-label" for="basic-example">Basic example</label>
        </div>
      

        const options = { items: [ { name: 'James', username: 'james123', image: '' }, { name:
        'John', username: 'john322', image: '' }, ] } const myMention = new
        Mention(document.getElementById('basic-example'), options);

通过jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own. 


        <div class="form-outline">
          <input type="text" id="basic-example" class="form-control mention" />
          <label class="form-label" for="basic-example">Basic example</label>
        </div>
      

        $('#basic-example').mention(options);

选件

Name Type Default Description
items Array '[]' An array of items to display on the list. Each user should contain the required username key value. Other key values are optional e.g. user, image
noResultsText String 'No results found' The text that will be displayed when no item is found after using mention filter
trigger String '@' Changes trigger sign that allows to search for items
queryBy String 'name' Changes the key by which list will be rendered and filtered
placement String 'bottom' Changes placement of the component relative to the reference element
showListOnTrigger Boolean 'true' Specifies whether whole list has to be opened before search input
showImg Boolean 'true' Displays user image on the list
visibleItems Number 5 The maximum number of items which are visible in the mention dropdown without scrolling.

方法

Name Description Example
getInstance Retuns instance of element mdb.Mention.getInstance(element)
open Manually opens a mention instance.open()
close Manually close a mention instance.close()
dispose Disposes a mention instance instance.dispose() 

        const mentionEl = document.getElementById('mentionEl');
        const mention = new Mention(mentionEl, {
            items: [
              { name: 'James', username: 'james123', image: '' },
              { name: 'John', username: 'john322', image: '' },
              { name: 'Mary', username: 'maryx', image: '' },
            ],
          });
        mention.open()

大事记

Name Description
open.mdb.mention This event fires immediately when the mention is opened.
close.mdb.mention This event fires immediately when the mention is closed.
select.mdb.mention This event fires immediately when the list item is selected
change.mdb.mention This event fires immediately when the mention reference element value changes
fetchError.mdb.mention This event fires immediately when getting asynchronous data fails 

        document.addEventListener('open.mdb.mention', (e) => {
          // do something...
        })

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件：


        import { Mention } from 'mdb-ui-kit';