servo1 / selectize.js-linkable-plugin

Allows multi select buttons to become links with regex pattern matching on data

selectize.js-linkable-plugin

Allows multi select buttons to become links with regex pattern matching on data.

Requires three options for settings

  linkFormat: '#object={{object}}&id={{id}}&action={{action}}&name={{name}}',
  linkTemplate: '<a href="{{link}}">{{linkText}}</a>',
  linkData: { object: 'funchains', action: 'edit'}

Implementation looks like this

$('#myselectize).selectize({
  plugins: ['remove_button', 'restore_on_backspace', 'drag_drop', 'linkable'],
  valueField: 'id',
  labelField: 'name',
  searchField: 'name',
  sortField: 'name',
  linkFormat: '#object={{object}}&id={{id}}&action={{action}}&name={{name}}',
  linkTemplate: '<a href="{{link}}">{{linkText}}</a>',
  linkData: { object: 'people', action: 'edit'}
});

Uses regex pattern matching to replace items within the double curly brackets {{}}. First process it uses is going through the data for the specified item in the select list. Then it appends the data contained within the 'linkData' option.

The 'linkText' is the text extracted from the item being rendered. The plugin only replaces the text surrounding it with the 'linkTemplate'.

Here's a more full example:

var data = [
  {id: 1, name: 'jack'},
  {id: 2, name: 'bob'}
];

$('#myselectize).selectize({
  plugins: ['remove_button', 'restore_on_backspace', 'drag_drop', 'linkable'],
  valueField: 'id',
  labelField: 'name',
  searchField: 'name',
  sortField: 'name',
  options: data,
  linkFormat: '#object={{object}}&id={{id}}&action={{action}}&name={{name}}',
  linkTemplate: '<a href="{{link}}">{{linkText}}</a>',
  linkData: { object: 'people', action: 'edit'}
});

The produced results for the button in the multi select box button text will look like this:
<a href="object=people&id=1&action=edit&name=jack">Jack</a>
second item:
<a href="object=people&id=2&action=edit&name=bob">bob</a>

The regex simply works on this foundation:
object = { propertname : 'value1' }
regex replacement function:
string: '#thisismy={{propertyname}}'
becomes:
'#thisismy=value1'
If there are no properties within the object corresponding to a {{propertynotfound}}, it simply returns an empty string in it's place.

Here is the regex function:

function subt  (str, data) {
  if (typeof str == "string" && typeof data == "object") {
    return str.replace(/{{(\w*)}}/g, function (match, key) {
      return data.hasOwnProperty(key) ? data[key] : "";
    });
  } else {
    return str;
  }
}

Since the plugin only replaces the text within the button (item/option), there is minimal interference with other plugins. The remove_button plugin code was used as the starting point for this plugin.

You can have as many variables as desired within the links that are generated, just ensure to include the data either within the items themselves as in the 'options' or on 'load' (for dynamic data) and then include the proper {{tagname}} within the url format.