I am using jstree plugin to search for nodes. It works and when found the defaul color is very bright blueish color. How do you chanage the default color to something else.

Also, if the search text is not found, I would like to be able to display error to the users. Any ideas how I would do this?

function myFunction()
{
$(document).ready(function(){

var value=document.getElementById("search_field").value; 

    $("#search_tree").click(function () { 

        $("#tree").jstree("search",value) 
 }); 

 }); 
}

This is my function that returns if it finds the text in the node list.

I would like to highligh the node with navy blue and also, move the window to that node (sometimes, three maybe too big and browser window needs to be adjusted to see the highlighted node). Very new to this type of scripting language and appreciate any input. Thanks.

I am using jstree plugin to search for nodes. It works and when found the defaul color is very bright blueish color. How do you chanage the default color to something else.

Also, if the search text is not found, I would like to be able to display error to the users. Any ideas how I would do this?

function myFunction()
{
$(document).ready(function(){

var value=document.getElementById("search_field").value; 

    $("#search_tree").click(function () { 

        $("#tree").jstree("search",value) 
 }); 

 }); 
}

This is my function that returns if it finds the text in the node list.

I would like to highligh the node with navy blue and also, move the window to that node (sometimes, three maybe too big and browser window needs to be adjusted to see the highlighted node). Very new to this type of scripting language and appreciate any input. Thanks.

• javascript
• jquery
• jstree

• Have you tried to edit the theme/default/style.css file to fit your needs ? – Philippe Boissonneault Commented Mar 5, 2013 at 20:14

2 Answers 2

To change the color you just need to edit line 45 of the theme CSS file:

.jstree-default a.jstree-search { color:aqua; }

Change aqua to whatever you like.

One further suggestion -- there are a bunch of different shades of blue used for various things in the style.css file for jsTree. My web page has a dark background, so the colors did not look good.

To simplify color changes, I created some variables at the top of the style.css file like this:

:root {
    --jstree-hover-color: transparent;
    --jstree-clicked-color: #4a4a4a;
    --jstree-search-color: #E0CD1F;
}

Then I replaced the hard-coded colors in the CSS with these variables. That way if I don't like a color, I can change it in one place and refresh the page to see how it looks.

In your case, this is where you change the color for the search results (this is from jsTree v3.x). I mented out the existing color value so I would know what it was originally:

.jstree-default .jstree-search {
    font-style: italic;
    /*color: #8b0000;*/
    color: var(--jstree-search-color);
    font-weight: bold;