Apex Tree Node Search

Question

Hi guys,
I want to search a tree node by using a textbox and a button item. I have implemented all required items and regions into my page. I think that, i can do this by using dynamic action. So I wrote a small script (jquery) to use in dynamic action in button click event. It gets the value of the textbox item and tries to use this value in tree's search method. By the way I specified a static ID for my tree region. (As you can see it is TREEID). But it doesn't work. Maybe usage of the method is different.
So ,
1 : The method usage is right?
2 : Do you have any other idea about how can i do this search stuff.
$("#TREEID").tree("search", document.getElementById("P300_SEARCH_TEXT").value);
Database : Oracle11g
Apex version : 4.1
Thanks

Answer 1

Mimi gave a very good start though. I have not worked with a tree before, but those tips guided me to the documentation, and i was able to take it from there. I can't see how the documentation would be lacking for you though, i find it to be clear. However, if you don't have some experience with javascript/jquery, this will not be straightforward.
I made a new tree page, based this on EMP.
When you want to do a search, you will first need the tree object, since the search function is a function of that object. I opened Firebug and ran this in my console:
jQuery.tree.focused()This is in the docs. "This functions returns the currently focused tree instance."
If you would have more trees, you could always use
jQuery.tree.reference(needle)This functions returns a specific tree instance by an ID or contained node.
Arguments:
mixed needle
This can be either the instance ID (the ID of the container node), an ID of any contained DOM element,
an actual DOM element contained within the tree, or a jQuery extended DOM node container within the tree.>
Now you have your tree object. Let's do a search. There are 2 employees with 'LL' in their names. I want to grab those.
$.tree.focused().search("LL")This'll do "nothing". Why? Take a look at the documentation:
Searches all nodes whose titles match a given string. If async is used a request is made to the server, the response should contain the comma-separated IDs of nodes that need to be opened so that all nodes that match the search string are visible.
The search string is provided in the request. The function triggers the onsearch callback, with the nodes found as a parameter.
Arguments:
string needle
The search string.
string compare_function
Optional argument. The jQuery function to be used for comparing titles to the string - defaults to "contains".>
What is of importance here is this: The function triggers the onsearch callback
+(oh, and please note that the search is looking for a match in the TITLE of the nodes!)+
So, taking a look at onsearch:
callback.onsearch Triggered after a search is performed and results are ready.
Receives two parameters - a jQuery collection of nodes matching the search and a reference to the tree instance.
*Default is: function(NODES, TREE_OBJ) { NODES.addClass("search");* }
>
So the default action of a search is something very simple: it assigns a class to the nodes which match the search criteria.
If you would want more complex things to happen, you can simply provide another function to the tree object for the onsearch callback, and that is what Mimi meant with changing it. But you don't have to if the class-adding is sufficient.
So, running from my firebug console:
$(".search").css({"background-color":"red"})Grab all elements with class 'search', and give them a red background color. My nodes are now red for "ALLEN" and "MILLER".
It also helps to use something like firebug, have knowledge of jquery, DOM and being able to inspect it, and read docs. I did not do anything special except applying some knowledge and taking my lead from those docs. Of course, Mimi mentioned this aswell, but the docs are at *\apex_images\libraries\jquery-jstree\0.9.9a2\documentation.html*
Hope that helps you forward.