https://github.com/sean-codes/js-mention
@ mention / tag input plugin using JavaScript
https://github.com/sean-codes/js-mention
Last synced: 3 months ago
JSON representation
@ mention / tag input plugin using JavaScript
- Host: GitHub
- URL: https://github.com/sean-codes/js-mention
- Owner: sean-codes
- License: mit
- Created: 2017-12-22T03:12:46.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-20T01:35:47.000Z (about 2 years ago)
- Last Synced: 2025-03-27T13:01:44.076Z (4 months ago)
- Language: JavaScript
- Size: 2.48 MB
- Stars: 21
- Watchers: 1
- Forks: 10
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# js-mention
@ mention / tag input plugin using plain JavaScript
Demo: [demo](https://sean-codes.github.io/js-mention/demo/reversed.html)
## Include:
```html
```
## Basic:
> Each option only requires a name field
```js
var myMention = new Mention({
input: document.getElementById('myTextArea'),
options: [
{ name: 'WideEye' },
{ name: 'LiquidLuck' },
{ name: 'PolyJuice' }
]
})
```
## Get the mentions
```js
var mentions = myMention.collect()
```
## Settings
### Watch for changes
When defining the mention object add update function
```js
var myMention = new Mention({
...
,
update: function() {
console.log(this.collect())
}
})
```
### Option display template
When defining the mention object add template function.
```js
var myMention = new Mention({
...
,
template: function(option) {
return '@' + option.name
}
})
```
### Match / Search function
When defining the mention object add match function.
```js
var myMention = new Mention({
...
,
match: function(word, option) {
// Match not case sensitive
return option.name.toLowerCase().startsWith(word.toLowerCase())
}
})
```