Search

Localization

We have localization for the OrgChart search option.
You just have to set the SEARCH_PLACEHOLDER constant:

// set before chart declaration
OrgChart.SEARCH_PLACEHOLDER = "Chercher"; // default is "Search"

Enable or Disable Search

You can disable the search option by setting enableSearch to false. It is enabled (true) by default.

enableSearch: false

Search in particular fields

You can search only in specific fields using searchFields. By default, the search works across all fields.

searchFields: ["name", "title", etc...],

Search by weight of the fields

You can control the priority of each field using searchFieldsWeight.
Higher values have higher priority.

searchFieldsWeight: {
    "name": 100, // percent
    "manager": 20 // percent
}

Example data

{ id: 1, name: "Denny Curtis", manager: "CEO" },
{ id: 2, pid: 1, name: "Ashley Barnett", manager: "Denny Curtis" },
{ id: 3, pid: 1, name: "Caden Ellison", manager: "Denny Curtis" },

Case 1

searchFieldsWeight: {
    "name": 100,
    "manager": 20
}

Click here to see the example

Case 2

searchFieldsWeight: {
    "name": 20,
    "manager": 100
}

Click here to see the example

Highlight nodes on search enter

You can change how matching and non-matching nodes look using:

• .match
• .no-match

CSS example

Templates example

Search fields abbreviation

You can search by field abbreviation.
By default, abbreviations are the first letters of the data fields.

To search by abbreviation, type for example:

Click here to see the example

You can also set your own search field abbreviations using the searchFiledsAbbreviation property:

searchFiledsAbbreviation: {        
    tel: 'phone',
    n: 'name'
},

Click here to see the example

Help

You can type ? for help.

In the help panel you can see the search field abbreviations that you can use to search in specific fields.

Click here to see the example

You can change the help symbol by setting the SEARCH_HELP_SYMBOL constant.
It can also be a word.
Leave it empty for the search help to open on click or focus.

OrgChart.SEARCH_HELP_SYMBOL = "help";

Display a field in the search result

You can use searchDisplayField to choose which field to display in the search results.

searchDisplayField: "title",

Search using a function

You can use the search function to search in the tree:

chart.search(value, searchInFields, retrieveFields);

chart.search("c", ["Name", "Title"], ["Title"]);

Search UI Customization

You can use show-items and add-item event listeners to customize the UI.

In the example below we are using:

• add-item to create a custom search result
• show-items to highlight hovered result nodes in the chart

Here is the code demo:

Edit in BALKAN Code