Show / Hide Table of Contents

Search

Localization

We have localization for the Org Chart JS Search option. You just have to set the SEARCH_PLACEHOLDER constant with the required value:

 
    OrgChart.SEARCH_PLACEHOLDER = "Chercher"; // the default value is "Search"
    var chart = new OrgChart(document.getElementById("tree"), {
        ...
    });

Enable or Disable Search

You can disable the Org Chart JS Search option, setting the enableSearch option to false. It is enabled(true) by default.

 
    var chart = new OrgChart(document.getElementById("tree"), {
        enableSearch: false,
        ...
    });

Search in particular fields

You can Search in the fields defined in searchFields. By default the fuction search in all the fields.

 
    var chart = new OrgChart(document.getElementById("tree"), {
        searchFields: ["name", "title", etc...],
        ...
    });

Search by weight of the fields

You can say what will be the weight of every field, using the searchFieldsWeight option. The hiegher value has higher priority in searching.

 
    var chart = new OrgChart(document.getElementById("tree"), {
        searchFieldsWeight: {
            "name": 100, //percent
            "manager": 20 //percent
        }
        ...
    });

For example you have this 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" },
If you have these options:
 
        searchFieldsWeight: {
            "name": 100, //percent
            "manager": 20 //percent
        }
you will get this result:

Search by weight Click here to see the example

If you have these options:
 
        searchFieldsWeight: {
            "name": 20, //percent
            "manager": 100 //percent
        }
you will get this result:
Search by weight Click here to see the example

Highlight nodes on search enter

You can cange the match and no match nodes on search enter, using .match or .no-match classes.

Click here to see the CSS example
Click here to see the templates example

Search fields abbreviation

You can search by field abbreviation. The abbreviations by default are the first letters form the data fields.
To search by abbreviation just type "n Ashley" for example.

Search field abbreviation Click here to see the example

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

 
    var chart = new OrgChart(document.getElementById("tree"), {
        searchFiledsAbbreviation: {        
            tel: 'phone',
            n: 'name'
        },
        ...
    });

Search field abbreviation Click here to see the example

Help

You can type ? for help. In help you see the search field abbreviations that you can use to search in particular fields.

Search field abbreviation Click here to see the example

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

 
    OrgChart.SEARCH_HELP_SYMBOL = "help";
    var chart = new OrgChart(document.getElementById("tree"), {
        ...
    });

Display a field in the search result

You can use searchDisplayField to set a field that you'd like to display in the search result.

 
    var chart = new OrgChart(document.getElementById("tree"), {
        searchDisplayField: "title",
        ...
    });

Search using a function

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

chart.search(value, searchInFileds, 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 ti highlight the hovered result nodes in the chart
Here is the code demo: