Search

Localization

We have localization for the OrgChart JS Serach 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 OrgChart JS Serach 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
            "Title": 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:


If you have these options:

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

you will get this result:

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: "name",
        ...
    });

Search using a function.

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

chart.search(value, searchInFileds, retrieveFields);

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