SearchAreaControl jQuery pluginGithub
SearchAreaControl is a complete jQuery plugin that let's you display, search and select multiple items of a tree data structure.
In order to user SearchAreaControl plugin you have to include jQuery before the plugin's script. Then, you can initialize the plugin providing the appropriate data and any custom options.
The plugin accepts a specific format of data. It actually accepts an array of nested objects (every object can hold an array of children objects) that produce a group of tree data structures.
var myData = [
{
"code": null,
"group": null,
"name": "Economy car",
"attributes": {
"data-id": "1"
},
"children": [
{
"code": null,
"group": null,
"name": "Microcar",
"attributes": {
"data-id": "11"
},
"children": null
},
{
"code": null,
"group": null,
"name": "Hatchbacks",
"attributes": {
"data-id": "12"
},
"children": [
{
"code": null,
"group": null,
"name": "Ultracompact car",
"attributes": {
"data-id": "121"
},
"children": null
},
{
"code": null,
"group": null,
"name": "City car",
"attributes": {
"data-id": "122"
},
"children": null
},
{
"code": null,
"group": null,
"name": "Supermini/subcompact car",
"attributes": {
"data-id": "123"
},
"children": null
}
]
}
]
},
{
"code": null,
"group": null,
"name": "Family car",
"attributes": {
"data-id": "2"
},
"children": [
{
"code": null,
"group": null,
"name": "Small family car/compact car",
"attributes": {
"data-id": "21"
},
"children": null
},
{
"code": null,
"group": null,
"name": " Large family / mid-size",
"attributes": {
"data-id": "22"
},
"children": null
}
]
},
{
"code": null,
"group": null,
"name": "Saloons / sedans",
"attributes": {
"data-id": "3"
},
"children": [
{
"code": null,
"group": null,
"name": "Large family / mid-size",
"attributes": {
"data-id": "31"
},
"children": null
},
{
"code": null,
"group": null,
"name": "Full size / large",
"attributes": {
"data-id": "32"
},
"children": null
},
{
"code": null,
"group": null,
"name": "Crossover SUV",
"attributes": {
"data-id": "33"
},
"children": null
},
{
"code": null,
"group": null,
"name": "Minivans / MPVs",
"attributes": {
"data-id": "34"
},
"children": null
}
]
},
{
"code": null,
"group": null,
"name": "Luxury vehicle",
"attributes": {
"data-id": "4"
},
"children": [
{
"code": null,
"group": null,
"name": "Compact executive",
"attributes": {
"data-id": "41"
},
"children": null
},
{
"code": null,
"group": null,
"name": "Executive / mid-luxury",
"attributes": {
"data-id": "42"
},
"children": null
},
{
"code": null,
"group": null,
"name": "Full-size luxury / Grand saloon",
"attributes": {
"data-id": "43"
},
"children": null
},
{
"code": null,
"group": null,
"name": "Estate cars / station wagons",
"attributes": {
"data-id": "44"
},
"children": null
}
]
},
{
"code": null,
"group": null,
"name": "Sports cars",
"attributes": {
"data-id": "5"
},
"children": [
{
"code": null,
"group": null,
"name": "Hot hatch",
"attributes": {
"data-id": "51"
},
"children": null
},
{
"code": null,
"group": null,
"name": "Sports saloon / sports sedan",
"attributes": {
"data-id": "52"
},
"children": null
},
{
"code": null,
"group": null,
"name": "Sports car",
"attributes": {
"data-id": "53"
},
"children": null
},
{
"code": null,
"group": null,
"name": "Grand tourer",
"attributes": {
"data-id": "54"
},
"children": null
},
{
"code": null,
"group": null,
"name": "Supercar",
"attributes": {
"data-id": "55"
},
"children": null
},
{
"code": null,
"group": null,
"name": "Muscle car",
"attributes": {
"data-id": "56"
},
"children": null
},
{
"code": null,
"group": null,
"name": "Pony car",
"attributes": {
"data-id": "57"
},
"children": null
},
{
"code": null,
"group": null,
"name": "Convertible",
"attributes": {
"data-id": "58"
},
"children": null
}
]
},
{
"code": null,
"group": null,
"name": "Off-roaders",
"attributes": {
"data-id": "6"
},
"children": [
{
"code": null,
"group": null,
"name": "Sport utility vehicle",
"attributes": {
"data-id": "61"
},
"children": null
}
]
},
{
"code": null,
"group": null,
"name": "Commercial vehicle",
"attributes": {
"data-id": "7"
},
"children": [
{
"code": null,
"group": null,
"name": "Van",
"attributes": {
"data-id": "71"
},
"children": null
}
]
}
];
Source: https://en.wikipedia.org/wiki/Car_classification#Microcar
Simple usage
$('#myButton').searchAreaControl({
data: myData,
mainButton: {
defaultText: 'Cars'
}
});
Now, let's use setSelectedNodes method to initialize the plugin with a selected node. We actually initialize the plugin first, and then call the appropriate method.
Select node
var btn = $('#myButton');
// Initialize plugin
btn.searchAreaControl({
data: myData,
mainButton: {
defaultText: 'Cars'
}
});
// Call "setSelectedNodes" method to select one node by "data-id" attribute
btn.searchAreaControl('setSelectedNodes', false, [55]);
There are several methods available to use in order to perform various tasks.
Examples
setSelectedNodes()Select one or more nodes.
$(document).on('click', '#setSelectedNodes_button', function() {
$('#myButton').searchAreaControl('setSelectedNodes',false,[57]);
});
getSelectedByAttribute()You can use getSelectedByAttribute() method to get the selected nodes by specific attribute. Here, we can use the data-id attribute.
$(document).on('click', '#getSelectedByAttribute_button', function() {
var selected = $('#myButton').searchAreaControl('getSelectedByAttribute','data-id');
});
setDisabled()You can use setDisabled() to enable or disable the button.
$(document).on('click', '#setDisabled_button', function() {
$('#myButton').searchAreaControl('setDisabled',true);
});
There is a number of options you can provide in order to customize the appearance and behaviour of the plugin.
The following table demonstate some of them. For a complete list of all the available options view the README.
| Name | Type | Default value | Description |
|---|---|---|---|
| data | object |
[] |
Provides the data that are going to be displayed |
| multiSelect | boolean |
true |
Set to false if you want to be able to select only one item at time |
| columns | number |
2 |
Set the number of columns that the data will be rendered |
| selectionByAttribute | string |
'data-id' |
Set the attribute that you want to select upon. The plugin will search for this attribute to match with the provided search string to filter all the items of the data array |
| modallHeader.text | string |
'Search' |
The text that is going to be displayed in the modal header |
| mainButton.defaultText | string |
'Items' |
Set the default button text |
We have already seen some of the available methods in action.
The following table demonstate some of them. For a complete list of all the available methods view the README.
| Name | Parameters | Return | Description |
|---|---|---|---|
| getData() | no | array |
Get the control's datasource object (array) |
| clearSelection() | no | void |
Clear selected items |
| getSelectedNodes() | no | object |
Get an object with two properties, selectedAll (boolean: All items are selected) and selectedNodes (array: Array of selected objects) |
| updateDatasource(data) | data [object] |
void |
Update the datasource |
| destroy() | no | void |
Destroy the plugin |
Developed by