Client side Javascript programming.

See more:

ASP.NET

Javascript

Hi all,
I have a page where it has "tree view control" . The data in the page will be like the following

<asp:TreeView ID="MyTreeView" Runat="server">
  <nodes>
    <asp:TreeNode Value="Child1" Expanded="False" Text="Par1">
      <asp:TreeNode Value="Grandchild1" Text="Chil1" />
      <asp:TreeNode Value="Grandchild2" Text="Chil2" />
      <asp:TreeNode Value="Grandchild3" Text="Chil3" />
    
    <asp:TreeNode Value="Child2" Expanded="False" Text="Par2">
      <asp:TreeNode Value="Grandchild1" Text="son4" />
      <asp:TreeNode Value="Grandchild2" Text="sonl5" />
      <asp:TreeNode Value="Grandchild3" Text="sonl6" />
    
    <asp:TreeNode Value="Child3" Expanded="False" Text="Par3">
      <asp:TreeNode Value="Grandchild1" Text="father7" />
      <asp:TreeNode Value="Grandchild2" Text="father8" />
      <asp:TreeNode Value="Grandchild3" Text="father9" />
    
  </nodes>

My task is i have to add one "Flter text box" in the page, where as the user enters text into this text box, it would "filter" the individual child in the "tree view control" that matches what is being typed.
Please see below for an example:
For example if user typed the word "chi". The idea is that as user type the letters, i would automatically do the following:
(1) Open up any parent nodes where they have a child that matches what is being typed.
(2) Hide any children that do not match what is being typed.
If the user deletes what's in the text box, it would naturally show all things and "close" all the parent nodes. I want to do this filtering with some client side javascript.
Please help me, thank you in advance please let me know if the question is not clear. I will explain clearly one more time.