js-mention's Introduction

js-mention

@ mention / tag input plugin using plain JavaScript

Demo: demo

Include:

  <link rel="stylesheet" href="/mention.css">
  <script src="/mention.js">

Basic:

Each option only requires a name field

  var myMention = new Mention({
      input: document.getElementById('myTextArea'),
      options: [
         { name: 'WideEye' },
         { name: 'LiquidLuck' },
         { name: 'PolyJuice' }
      ]
   })

Get the mentions

   var mentions = myMention.collect()

Settings

Watch for changes

When defining the mention object add update function

  var myMention = new Mention({
    ...
    ,
    update: function() {
       console.log(this.collect())
    }
  })

Option display template

When defining the mention object add template function.

  var myMention = new Mention({
    ...
    ,
    template: function(option) {
       return '@' + option.name
    }
  })

Match / Search function

When defining the mention object add match function.

  var myMention = new Mention({
    ...
    ,
    match: function(word, option) {
       // Match not case sensitive
       return option.name.toLowerCase().startsWith(word.toLowerCase())
    }
  })

Recommend Projects