Searchable Multi-selectable Tree Plugin For jQuery - SearchAreaControl
File Size: | 156 KB |
---|---|
Views Total: | 5434 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.