Searchable Multi-selectable Tree Plugin For jQuery - SearchAreaControl

SearchAreaControl is a flexible, dynamic, user-friendly jQuery multiple select plugin which allows the users to search and select multiple items from hierarchical data in a modal popup.

How to use it:

1. Download and include the SearchAreaControl plugin's files on your webpage which has jQuery library included.

<link rel="stylesheet" href="sac-style.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="searchAreaControl.js"></script>

2. Create a trigger element that will display the SearchAreaControl modal popup when clicked.

<button id="myButton" type="button">

3. Prepare your hierarchical data for the tree structure from which you can select one or more items (Typically an array of nested JSON objects).

var myData = [
  {
    "code": null,
    "group": null,
    "name": "Category 1",
    "attributes": {
      "data-id": "1"
    },
    "children": [
      {
        "code": null,
        "group": null,
        "name": "Category 1-1",
        "attributes": {
          "data-id": "11"
        },
        "children": null
      },
      {
        "code": null,
        "group": null,
        "name": "Category 1-2",
        "attributes": {
          "data-id": "12"
        },
        "children": [
          {
            "code": null,
            "group": null,
            "name": "Category 1-2-1",
            "attributes": {
              "data-id": "121"
            },
            "children": null
          },
          {
            "code": null,
            "group": null,
            "name": "Category 1-2-2",
            "attributes": {
              "data-id": "122"
            },
            "children": null
          }
        ]
      }      
    ]
  },
];

4. Initialize the plugin and specify the data source your want to use.

$('#myButton').searchAreaControl({ 
  data: myData
});

5. All default plugin options to customize the SearchAreaControl.

$('#myButton').searchAreaControl({ 

  // options of modal header
  modallHeader: {
    text: 'Search',
    className: '',
    visible: true
  },

  // enable multi-select
  multiSelect: true,

  // number of columns
  columns: 2,

  // data attribute you want to select upon
  selectionByAttribute: 'data-id',

  // options of search box
  searchBox: {
    enabled: true,
    minCharactersSearch: 2,
    searchBoxClass: '',
    searchBoxPlaceholder: '',
    showSelectedItemsBox: true,
    selectedItemsLabelVisible: true,
    selectedItemsLabelText: 'Selected items',
    hideNotFound: true,
    searchType: {
      startsWith: {
        text: 'Starts with',
        selected: false
      },
      existsIn: {
        text: 'Exists in',
        selected: true
      }
    }
  },

  // options of modal popup
  popupDimensions: {
    width: '700px',
    left: '50%',
    marginLeft: '-350px'
  },

  // options of main button
  mainButton: {
    defaultText: 'Items',
    defaultNoneText: 'None',
    defaultAllText: 'All',
    showAllText: true,
    maxSelectedViewText: 1
  },

  // options of modal buttons
  popupButtons: {
    selectAll: {
      text: 'Select all',
      className: 'btn btn-success',
      visible: true,
      callback: null
    },
    diselectAll: {
      text: 'Diselect all',
      className: 'btn btn-default',
      visible: true,
      callback: null
    },
    invertSelection: {
      text: 'Invert selection',
      className: 'btn btn-default',
      visible: true,
      callback: null
    },
    close: {
      text: 'Close',
      className: 'btn btn-default',
      visible: true,
      callback: null
    }
  }

});

6. API methods:

// Gets the datasource object
$('#myButton').searchAreaControl('getData');

// allSelected [boolean], collection [array]
// Provide a collection of attributes (selectionByAttribute) to be selected, or set allSelected to true to select all available items.
$('#myButton').searchAreaControl('setSelectedNodes', allSelected,collection);

// Clears selected items
$('#myButton').searchAreaControl('clearSelection');

// Gets an object with two properties, selectedAll (boolean: All items are selected) and selectedNodes (array: Array of selected objects)
$('#myButton').searchAreaControl('getSelectedNodes');

// Gets an array of specific attribute values of the selected items
$('#myButton').searchAreaControl('getSelectedByAttribute', attributeName);

// Gets disabled state of main button
$('#myButton').searchAreaControl('getDisabled');

// Toggles main button disabled state
$('#myButton').searchAreaControl('setDisabled', boolean);

// Updates date source
$('#myButton').searchAreaControl('updateDatasource', data);

// Destroys the plugin
$('#myButton').searchAreaControl('destroy');

About Author:

Author: John Kapantzakis

Website: https://github.com/kapantzak/SearchAreaControl

---

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