Enable Slash Commands On Text Fields - jQuery Slasher

File Size: 35.4 KB
Views Total: 675
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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.