PanelMenu - how to filter items

[felipecaparelli]

I am trying to create a field to find itens in my main menu (just like the search bar at primefaces showcase). Is that possible?

Code: Select all

<div class="ui-panelmenu ui-widget" role="menu">
  <div class="ui-panelmenu-panel">
      <h3 class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
              Menu <p:inputText placeholder="Pesquisar..." id="menuFilter" styleClass="filter" onkeyup="filterMenu(this.value)" />
      </h3>
  </div>
					    
  <p:panelMenu model="#{menuView.model}" id="menu" />
</div>

[kukeltje]

I don't think you can. The showcase panelmenu is not a pf panelmenu

[felipecaparelli]

I don't think you can. The showcase panelmenu is not a pf panelmenu

I find a way to do the job. I've created a javascript function that simulates this behavior (I'm not proud about that, but it works)

Code: Select all

function filterMenu(s) {
	
	var atividades = $('.ui-panelmenu .ui-menu-list > .ui-menu-parent > .ui-menu-list > .ui-menuitem a.ui-menuitem-link');
        //I've added to my menu items some css classes to identify and find subitems on my menu...
	var sistemas = $('.ui-panelmenu .level1');
	var modulos = $('.ui-panelmenu .level2');
	var submodulos = $('.ui-panelmenu .level3');
	
	if(s.length < 3){	
		sistemas.show();
		modulos.show();
		atividades.show();
		sistemas.find('.ui-panelmenu-content').hide();
		modulos.find('.ui-menu-list').hide();
		submodulos.find('.ui-panelmenu-content').hide();
		changeGroupStyle(sistemas, false);
		changeSubGroupStyle(modulos, false);
		if(submodulos) changeSubGroupStyle(submodulos, false);
		return false;
	}
	
	jQuery.each(atividades, function( index ) {
		var it = $( this );
		var lb = it.text();
		if(!containsIgnoreCase(s, lb)) {
			it.removeClass('open');
			it.hide();
			if(submodulo) changeSubGroupStyle(submodulo, false);
		} else {
			it.show();
			it.addClass('open');
			var sistema = it.closest('.sistema');
			sistema.show();
			sistema.closest('.ui-panelmenu-content').show();
			var modulo = it.closest('.modulo');
			modulo.show();
			modulo.find('.ui-menu-list').show();
			var submodulo = it.closest('.modulo');
			submodulo.show();
			submodulo.closest('.ui-panelmenu-content').show();
			if(submodulo) changeSubGroupStyle(submodulo, true);
			return true;
		}
	});
	
	modulos.each(function( index ) {
		var modulo = $( this );
		var numItens = $( this ).find('a.ui-menuitem-link.open').length;
		if(numItens == 0) {
			modulo.hide();
			changeSubGroupStyle(modulo, false);
		} else {
			changeSubGroupStyle(modulo, true);
		}
	});	
	
	sistemas.each(function( index ) {
		var sistema = $( this );
		var numItens = sistema.find('a.ui-menuitem-link.open').length;
		
		if(numItens == 0) {
			sistema.hide();		
			changeGroupStyle(sistema, false);
		} else {
			changeGroupStyle(sistema, true);
		}
	});
}

/* atualiza o estilo dos grupos principais [sistemas] do menu (aberto ou fechado) */
function changeGroupStyle(group, open) {
	//obtem os elementos a serem estilizados
	var header = group.find('.ui-panelmenu-header');
	var icon = header.find('.ui-icon');
	//atualiza estilo do header
	header.toggleClass('ui-state-active', open);
	//atualiza estilo do icone
	icon.toggleClass('ui-icon-triangle-1-s', open);
	icon.toggleClass('ui-icon-triangle-1-e', !open);
}

/* atualiza o estilo dos grupos secundários [modulos e submodulos] do menu (aberto ou fechado) */
function changeSubGroupStyle(group, open) {
	//obtem os elementos a serem estilizados
	var icon = group.find('.ui-icon');
	//atualiza estilo do icone
	icon.toggleClass('ui-icon-triangle-1-s', open);
}