Enable Slash Commands On Text Fields - jQuery Slasher

Slasher is a jQuery plugin that makes it possible to enable slash commands on any text field.

After creating custom commands, you will see a list of matched slash commands when you type a forward slash / plus a keyword in a text field.

Supports both textarea and input elements. Requires Caret.js library.

See also:

• Twitter Like @Mentions Auto Suggesting Plugin with jQuery - Bootstrap Suggest
• Colorfy #Tags And @Mentions In An Editable Content - jQuery autotag
• Facebook-like @mention Autocomplete Plugin With jQuery - mentiony
• Customizable jQuery @Mentions And #Tags Plugin - mentions-kinder.js
• jQuery Plugin To Generate Links For URLs, Mentions and Hashtags - Linky
• Twitter & Facebook Like Mention Input Plugin with jQuery

How to use it:

1. Download the plugin and place the jquery.slasher.js script after jQuery and Caret.js libraries.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery.caret.min.js"></script>
<script src="/path/to/jquery.slasher.js"></script>

2. Create an array of commands as follows:

const myCommands = [
      {
        command: 'Command 1', 
        description: 'Command 1', 
        callback: function1
      },{
        command: 'Command 2', 
        description: 'Command 2', 
        callback: function2
      },{
        command: 'Command 3', 
        description: 'Command 3', 
        callback: function3
      },
],

function function1(element, commandInfo) {
  console.log('Action 1')
}

function function2(element, commandInfo) {
  console.log('Action 2')
}

function function3(element, commandInfo) {
  console.log('Action 3')
}

3. Attach the Slash Command plugin to your text field and done.

<textarea id="example"></textarea>

$('#example').slasher({
  items: myCommands
});

4. Customize the styles of the command list. In this example, we're going to uses Bootstrap to style the slash command plugin.

<!-- OPTIONAL -->
<link rel="stylesheet" href="/path/to/bootstrap.min.css" />

$('#example').slasher({
  items: myCommands,
  cssClasses: {
    dropdownListClasses: 'dropdown-menu',
    dropdownListItemClasses: 'dropdown-item d-flex flex-column ',
    dropdownActiveItemClasses: '',
    commandClasses: 'font-weight-bold text-primary',
    descriptionClasses: 'text-muted '
  }
});

5. Determine the z-index of the command list. Default: '10000'

$('#example').slasher({
  items: myCommands,
  zIndex: '999'
});

---

This awesome jQuery plugin is developed by SocialBu. For more Advanced Usages, please check the demo page or visit the official website.