How to filter item from a menu

Question

I'm using SmartGWT

I'm trying to make a user interface that show a menu and a input text.

The menu contains items on tree levels as you can see it in the "Category" menu here. The input text that can filter on the downest item in the menu.

If I put "2" in input text then only Menu with a "2" in the title appear. Parent that have no child dissappear.

Run the snippet to see a quick example of what I want to 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 a {
  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 a {
  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 the 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 this possible with SmartGwt ?

Answer 1

Yes, you should be able to reach to a very similar result. An approach would be to utilize a mix of Toolstrip for the menu, ToolStripButton or ToolStripMenuButton, for the sub menus. Also use a DynamicForm and a TextItem for the input text. When the value of the TextItem is modified intercept the ChangedEvent through the addChangedHandler method and update the menu accordingly.