gwt - How to filter item from a menu -

i'm using smartgwt

i'm trying make user interface show menu , input text.

the menu contains items on tree levels can see in "category" menu here. input text can filter on downest item in menu.

if put "2" in input text menu "2" in title appear. parent have no child dissappear.

run snippet see quick example of want do.

function mainmenu() {    $(" #nav ul ").css({      display: "none"    }); // opera fix    $(" #nav li").hover(function() {      $(this).find('ul:first').css({        visibility: "visible",        display: "none"      }).show(400);    }, function() {      $(this).find('ul:first').css({        visibility: "hidden"      });    });  }        $(document).ready(function() {    mainmenu();  });

body {    font-size: 0.85em;    font-family: verdana, arial, helvetica, sans-serif;  }  .nav,  .nav ul {    margin: 0;    padding: 0;    list-style-type: none;    list-style-position: outside;    position: relative;    line-height: 1.5em;  }  .nav {    display: block;    padding: 0px 5px;    border: 1px solid #333;    color: #fff;    text-decoration: none;    background-color: #333;  }  .nav a:hover {    background-color: #fff;    color: #333;  }  .nav li {    float: left;    position: relative;  }  .nav ul {    position: absolute;    display: none;    width: 12em;    top: 1.5em;  }  .nav li ul {    width: 12em;    height: auto;    float: left;  }  .nav ul ul {    top: auto;  }  .nav li ul ul {    left: 12em;    margin: 0px 0 0 10px;  }  .nav li:hover ul ul,  .nav li:hover ul ul ul,  .nav li:hover ul ul ul ul {    display: none;  }  .nav li:hover ul,  .nav li li:hover ul,  .nav li li li:hover ul,  .nav li li li li:hover ul {    display: block;  }

<p>quick representation of menu :</p>    <ul class="nav">    <li><a href="#">menu 1</a>      <ul>        <li><a href="#">menu 1.1</a>        </li>        <li><a href="#">menu 1.2</a>        </li>      </ul>    </li>    <li><a href="#">menu 2</a>      <ul>        <li><a href="#">menu 2.1</a>          <ul>            <li><a href="#">menu 2.1.1</a>            </li>            <li><a href="#">menu 2.1.2</a>            </li>            <li><a href="#">menu 2.1.3</a>            </li>          </ul>        </li>        <li><a href="#">menu 2.2</a>        </li>        <li><a href="#">menu 2.3</a>          <ul>            <li><a href="#">menu 2.3.1</a>            </li>            <li><a href="#">menu 2.3.2</a>            </li>          </ul>        </li>      </ul>    </li>    <li><a href="#">menu 3</a>      <ul>        <li><a href="#">menu 3.1</a>        </li>        <li><a href="#">menu 3.2</a>        </li>      </ul>    </li>    <li><a href="#">menu 4</a>      <ul>        <li><a href="#">menu 4.1</a>        </li>      </ul>    </li>  </ul>  <br>  <br>  <input value="" />    <br>  <br>  <br>  <br>  <br>  <br>  <br>    <ul class="nav">    <li><a href="#">menu 1</a>      <ul>        <li><a href="#">menu 1.2</a>        </li>      </ul>    </li>    <li><a href="#">menu 2</a>      <ul>        <li><a href="#">menu 2.1</a>          <ul>            <li><a href="#">menu 2.1.1</a>            </li>            <li><a href="#">menu 2.1.2</a>            </li>            <li><a href="#">menu 2.1.3</a>            </li>          </ul>        </li>        <li><a href="#">menu 2.2</a>        </li>        <li><a href="#">menu 2.3</a>          <ul>            <li><a href="#">menu 2.3.1</a>            </li>            <li><a href="#">menu 2.3.2</a>            </li>          </ul>        </li>      </ul>    </li>    <li><a href="#">menu 3</a>      <ul>        <li><a href="#">menu 3.2</a>        </li>      </ul>    </li>  </ul>  <br>  <br>  <input value="2" />    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

is possible smartgwt ?

yes, should able reach similar result. approach utilize mix of toolstrip menu, toolstripbutton or toolstripmenubutton, sub menus. use dynamicform , textitem input text. when value of textitem modified intercept changedevent through addchangedhandler method , update menu accordingly.