提到 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
自定义搜索条件
使用 queryBy
选项更改搜索条件
自定义无结果文本
将 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(
|
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';