Search
Localization
We have localization for the Family Tree JS Search option. You just have to set the SEARCH_PLACEHOLDER constant with the required value:
 FamilyTree.SEARCH_PLACEHOLDER = "Chercher"; // the default value is "Search" var family = new FamilyTree(document.getElementById("tree"), { ... });
Enable or Disable Search
You can disable the Family Tree JS Search option, setting the enableSearch option to false. It is enabled(true) by default.
var family = new FamilyTree(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 family = new FamilyTree(document.getElementById("tree"), { searchFields: ["name", "birthDate", 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.
For example searching for Irinain the following example...
If you have these options:searchFieldsWeight: { "name": 100, //percent "friends": 20 //percent }you will get this result:
If you have these options:
searchFieldsWeight: { "name": 20, //percent "friends": 100 //percent }you will get this result:
Highlight nodes on search enter
You can cange the match and no match nodes on search enter using .match or .no-match classes.
Press enter to see the result.
Click here to see the example with CSS
Click here to see the example with templates
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.
You can also set your own search field abbreviations using the searchFiledsAbbreviation property:
var family = new FamilyTree(document.getElementById("tree"), { searchFiledsAbbreviation: { tel: 'phone', n: 'name' }, ... });
Help
You can type ? for help.
In help you see the search field abbreviations that you can use to search in particular fields.
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.
 FamilyTree.SEARCH_HELP_SYMBOL = "help"; var family = new FamilyTree(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 family = new FamilyTree(document.getElementById("tree"), { searchDisplayField: "title", ... });
Search using a function
You can use the search function to search in the tree.
family.search(value, searchInFileds, retrieveFields);
family.search("c", ["Name"], ["Name"]);